Segmented

One choice out of two to five, all visible at once, such as a view mode or a period. For more options use a select.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Showing the board view for 28 days.

Showing the board view for 28 days.

Showing the board view for 28 days.

tsx

import { Segmented } from '@skribly/ui/navigation'

tsx

<Segmented label="View" value={view} onChange={setView} options={[
  { value: 'board', label: 'Board' },
  { value: 'list', label: 'List' }
]} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

A radio group: Tab reaches the checked option, arrow keys move between options and Space or Enter picks one.
Icon-only options take ariaLabel.
The checked option has a raised surface, and a Highlight border under forced colours.
Options wrap rather than scroll on narrow screens.

This demo runs through axe in all three themes on every test run. See what the tests check.