Segmented Control

Basic

Default Selected Segment

• You can set the default selected segment by using the defaultIndex prop.
• The defaultIndex is 0 by default.

Controlled

• To control Segmented state, use selectedIndex and onChange props.

Disabled

• To disable a SegmentedItem, set the disabled prop to true.

Sizes

• Segmented supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Customization

Segmented control with indicator

Segmented control with overflow menu

Accessibility

Roles and properties

• The SegmentedItem component has the type="button", role="radio", tabIndex="-1" and data-segmented-item-index is current index of this item in a Segmented component.
• The selected SegmentedItem has the aria-checked="true" and tabIndex="0"

Keyboard interactions

• The Segmented component supports the following keyboard interactions when focus is on the SegmentedItem component:

Key	Description
Right Arrow	- Moves focus to the next segmented item. - If focus is on the last segmented item, moves focus to the first segmented item.
Left Arrow	- Moves focus to the previous segmented item. - If focus is on the first segmented item, moves focus to the last segmented item.
Home	Moves focus to the first segmented item.
End	Moves focus to the last segmented item.