Segmented Control

A row of options where exactly one is selected. Use it to switch a view or a setting in place, like a period or a layout.

General

Give each item a value, start on one with initialValue and name the group with aria-label.

Controlled

Pass value and onChange to keep the selection in your own state.

Full width

With fullWidth, the group fills its container and the items share the space.

APIs

SegmentedControl.Props

Attribute	Description	Type	Accepted values	Default
value	selected item, to control it	`string` \| `number`	-	-
initialValue	item selected on the first render	`string` \| `number`	-	-
onChange	called with the `value` of the chosen item	`(value: string \| number) => void`	-	-
disabled	disables every item	`boolean`	-	`false`
fullWidth	fills the width of the container	`boolean`	-	`false`
...	native props, passed to the `div`	`HTMLAttributes`	`'aria-label', 'id', ...`	-

SegmentedControl.Item.Props

Attribute	Description	Type	Accepted values	Default
value	identifies the item in `value` and `onChange`	`string` \| `number`	-	-
disabled	the item cannot be chosen	`boolean`	-	`false`
...	native props, passed to the radio `input`	`InputHTMLAttributes`	`'id', ...`	-

Ref

The ref of SegmentedControl points at the div, and the ref of each item at its radio input.

The group is a radiogroup and each item is a native radio, so a screen reader announces the name of the group, the option and its position. Name the group with aria-label. Tab moves focus into the group on the selected item, and the arrow keys move between the items and select the one in focus. The selected item is not shown by color alone: it also gets a raised background.

Edit this page on GitHub