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. |