SegmentedControlProps

Updated on Apr 23, 2026

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.

Name	Type	Default	Description
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. vue <SegmentedControl :default-value="'option2'" :items="items" />
items?	SegmentedItemProps[]		Specifies the collection of items rendered as buttons inside the SegmentedControl. vue <SegmentedControl :items="[{ value: 'opt1', text: 'Option 1' }, { value: 'opt2', text: 'Option 2' }]" />
itemTemplate?	(itemData: SegmentedItemProps) => any		A custom render function for the item content. When provided, it replaces the default rendering (SVG icon + text span) entirely. Receives the full item configuration object and must return a VNode. vue <SegmentedControl :items="items" :item-template="renderItem" />
layoutMode?	"stretch" | "compact"	"compact"	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 the k-segmented-control-stretched CSS class. vue <SegmentedControl :layout-mode="'stretch'" :items="items" />
size?	"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: small medium large null — Does not set a size className. vue <SegmentedControl :size="'large'" :items="items" />
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. vue <SegmentedControl :value="selectedValue" @change="(val) => selectedValue = val" :items="items" />