SegmentedControl
SegmentedControl is a row of mutually exclusive segments, like Apple’s segmented control: pick one view, range or mode out of a few. The selected segment is marked by an indicator that slides to the new segment when the selection changes. Use it for two to five short options; for more, or for longer labels, use a select.
Demos
Basic
Give it options, each with a label and a value. Segments are as wide as the widest one.
Size
size matches the Button heights: small, medium (default) and large.
Icons
An option with an icon shows only the icon; its label becomes the accessible name and tooltip. Use icons for every option or for none, not a mix.
Width
itemWidth="content" sizes each segment to its label instead of making them equal. block fills the container.
Disabled
disabled on an option skips it; disabled on the control disables every segment.
Controlled
Pass value and onUpdateValue to own the selection. null selects nothing.
Accessibility
The control is a radiogroup of radio buttons, so give it an aria-label or aria-labelledby. Tab stops on the selected segment only (or the first enabled one when nothing is selected); the arrow keys move the selection, skipping disabled segments and wrapping around, and Home and End jump to the first and last segment.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
options | SegmentedControlOption[] | required | The segments, in order: { label, value, disabled?, icon? }. | Unreleased |
value | string | number | null | undefined | Selected value when controlled; null selects nothing. | Unreleased |
defaultValue | string | number | null | null | Initially selected value when uncontrolled. | Unreleased |
onUpdateValue | (value, option) => void | undefined | Called with the newly selected value and its option. | Unreleased |
size | small | medium | large | medium | Height, matching Button. | Unreleased |
itemWidth | equal | content | equal | equal makes every segment as wide as the widest; content sizes each to its label. | Unreleased |
block | boolean | false | Fills the width of the container. | Unreleased |
disabled | boolean | false | Disables every segment. | Unreleased |
name | string | undefined | Submits the selected value with a form under this name. | Unreleased |
SegmentedControl also accepts native div attributes and a ref.