Components
Segmented
A single-choice view switcher — a table / board toggle.
Available since@crisp-ui-kit/crisp@0.11.0
A single-choice toggle — a view switcher: a subtle track with the selected option raised on a white pill. role="radiogroup" over role="radio" buttons with roving tabindex and ←/→ (Home/End) keyboard selection. Options can be text, icons, or both.
Installation
npm install @crisp-ui-kit/crispKeyboard
role="radiogroup" over role="radio" buttons, running crisp's shared model — the same one
RadioGroup uses.
| Key | Action |
|---|---|
Tab | Enter and leave the group. It is one stop: the arrows move within it. |
← → ↑ ↓ | Move to the next or previous enabled option and select it, wrapping. |
Home / End | Jump to the first or last option. |
Moving selects, and focus moves with it. That pairing is what makes the single roving tab stop
work — a handler that selected without moving focus would leave focus on a tabindex="-1" button
while the tab stop sat somewhere else.
Props
Prop
Type
SegmentedOption is { value, label?, icon?, disabled?, "aria-label"? }.