SegmentedControlProps

Updated on Mar 13, 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. tsx <SegmentedControl defaultValue="option2" onChange={(value) => console.log('Selected:', value)} items={items} />
items?	SegmentedItemProps[]		Specifies the collection of items rendered as buttons inside the SegmentedControl.
itemTemplate?	(itemData: SegmentedItemProps) => ReactNode		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 React node. tsx <SegmentedControl items={items} itemTemplate={(itemData) => ( <div className="custom-item-content"> {itemData.svgIcon && <span className="icon">{itemData.svgIcon}</span>} <span className="text">{itemData.text}</span> <span className="badge">New</span> </div> )} />
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.
onChange?	(value: string) => void		Callback fired when a non-selected item is clicked and the selection changes. Not triggered when the already-selected item is clicked. Receives the value of the newly selected item. tsx <SegmentedControl onChange={(value) => { console.log('Selected value:', value); }} 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.
value?	string		The currently selected item value. When provided, the component operates in controlled mode and onChange must be used to update this value. The item whose value matches this prop receives the k-selected CSS class. tsx <SegmentedControl value="option1" onChange={(value) => setSelectedValue(value)} items={items} />