KendoReact SegmentedControl Overview

Updated on Nov 6, 2026

The KendoReact SegmentedControl displays a horizontal set of mutually exclusive buttons, allowing users to select a single option from a group. It is ideal for switching between views, modes, or filter states.

The KendoReact SegmentedControl is distributed through the kendo-react-buttons NPM package.

The following example demonstrates the SegmentedControl in action.

Example

View Source

Loading ...

Key Features

• Binding Items—Define the collection of items rendered by the SegmentedControl.
• Controlled Mode—The SegmentedControl supports both controlled mode (using the value prop) and uncontrolled mode (using the defaultValue prop).
• Appearance—Configure the size of the SegmentedControl.
• Layout Mode—Switch between compact and stretch layout modes to control how items are sized.
• Disabled Items—Disable individual items to prevent user interaction.
• Icon Options—Use SVG icons with text or provide accessible names for icon-only items.
• Customization—Use the itemTemplate prop to fully customize the appearance of each item.

KendoReact SegmentedControl APIs

• Appearance
• API Reference of the SegmentedControl
• API Reference of the SegmentedControlHandle
• API Reference of the SegmentedItemProps