# KendoReact SegmentedControl Overview

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](https://www.npmjs.com/package/@progress/kendo-react-buttons).

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates the SegmentedControl in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/buttons/segmentedcontrol/basic-uncontrolled/source.txt)

## Key Features

* [Binding Items](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/items)—Define the collection of items rendered by the SegmentedControl.
* [Controlled Mode](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/controlled-mode)—The SegmentedControl supports both controlled mode (using the [`value`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#value) prop) and uncontrolled mode (using the [`defaultValue`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#defaultValue) prop).
* [Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/appearance)—Configure the size of the SegmentedControl.
* [Layout Mode](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/layout-mode)—Switch between compact and stretch layout modes to control how items are sized.
* [Disabled Items](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/disabled)—Disable individual items to prevent user interaction.
* [Icon Options](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/icons)—Use SVG icons with text or provide accessible names for icon-only items.
* [Customization](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/customization)—Use the [`itemTemplate`](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops#itemTemplate) prop to fully customize the appearance of each item.

## KendoReact SegmentedControl APIs

* [Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/segmentedcontrol/appearance)
* [API Reference of the SegmentedControl](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolprops)
* [API Reference of the SegmentedControlHandle](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmentedcontrolhandle)
* [API Reference of the SegmentedItemProps](https://www.telerik.com/kendo-react-ui/components/buttons/api/segmenteditemprops)