SegmentedControlProps
Represents the properties of the SegmentedControl component.
The SegmentedControl displays a horizontal set of mutually exclusive button segments, allowing the user to select one option at a time.
Definition
Package:@progress/kendo-vue-buttons
Properties
defaultValue?
string
Sets the initially selected item value when the component is in uncontrolled mode (i.e., value is not provided).
Once set, subsequent changes to defaultValue are ignored.
Specifies the collection of items rendered as buttons inside the SegmentedControl.
itemTemplate?
string | (itemData: SegmentedItemProps) => any
A custom template for the item content. When provided, it replaces the default rendering (SVG icon + text span) entirely.
Accepts a string (slot name) or a render function. The slot receives { props: { item } }
where item is the full item configuration object.
layoutMode?
"compact" | "stretch"
Specifies the layout mode of the SegmentedControl.
compact: Items are sized based on their content (default).stretch: Items stretch to fill the available horizontal space, applying thek-segmented-control-stretchedCSS class.
"compact"
size?
"xs" | "small" | "medium" | "large"
Sets the size of the SegmentedControl items. The value is mapped through kendoThemeMaps.sizeMap
to the corresponding CSS size class.
The available options are:
xssmallmediumlargenull— Does not set a size className.
value?
string
The currently selected item value.
When provided, the component operates in controlled mode and the change event must be used to update this value.
The item whose value matches this prop receives the k-selected CSS class.