Segmented Control
Segmented control is a linear set of two or more buttons, each of which functions as a mutually exclusive selection element.

Usage

SegmentedControl renders all the items you pass as its children and applies same width to each item. It renders radio buttons, so name should be passed to the SegmentedControl while values should be passed to each item separately.

You can use defaultValue like shown in the previous example to use it as an uncontrolled component. To switch it to controlled mode – use value instead and trigger your state changes using onChange property.

Accessibility

SegmentedControl uses native radio buttons internally, so it provides arrow key selection out-of-the-box.

Properties

SegmentedControl props:

NameTypeDefaultRequiredComment
namestring-false
valuestring, null-falseControlled value
defaultValuestring-falseUncontrolled value
onChange({ value, name, event }) => {}-false
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

SegmentedControl.Item props:

NameTypeDefaultRequiredComment
valuestring-falseItem value
childrenReactNode-false