Segmented Control
A compact single choice among a few peers, where all the options are worth showing at once.
Against Tabs and Radio
Use this to filter or re-scope the view you're already looking at. Use Tabs to switch between genuinely different panels, and Radio when the choice is part of a form being submitted. Past four or five options it gets cramped — reach for Select.
Full width
Controlled
onChange hands you the value directly, not an event.
Showing the last week
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value: string; label: string }[] | The segments, in order. | |
| value | string | Controlled selected value. | |
| defaultValue | string | Uncontrolled initial value. | |
| onChange | (value: string) => void | Fires with the newly selected value. | |
| fullWidth | boolean | false | Stretches the track to fill its container; segments then share the width equally. |
Why it works this way
Why
- It switches between two to six views or modes of the same content, with a single selected segment always visible.
Don't
- Don't use it to move between pages. Use Tabs or navigation.
- Don't use it for more than six segments.