SegmentedControl
For three or four options that fit on screen, where a select would hide the answer behind a click. It is a radio group, not a tab list: it picks a value rather than swapping a panel, and the arrow keys select as they move, which is how a radio group is meant to behave.
import
import { SegmentedControl, SegmentedOption } from '@joshicodes/cock';Choices
One stop in the tab order. The arrow keys move and select in one go.
Stretched to the column.
week · grid
Keyboard
- ← / → or ↑ / ↓
- Moves to the next option and selects it
- Home / End
- First or last option
Behaviour
- Reach for `Select` once the list gets long or the labels get wordy; this one stops being readable at about four.
- The whole strip is one stop in the tab order. Tab moves past it, the arrows move inside it.
- `stretch` fills the width, which is what you want in a narrow column or on a phone.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of SegmentedControl
| Prop | Type | Default |
|---|---|---|
value bindable | string | '' |
options required | SegmentedOption[] | — |
size | 'sm' | 'md' | 'md' |
disabled | boolean | false |
label Names the group for screen readers. Skip it inside a `<Field>`. | string | — |
stretch Stretch the segments to fill the width instead of hugging their text. | boolean | false |
class | string | — |