SegmentedControl

Picks one of a few related options in place (e.g. a view or a filter). Figma designs three segments in two sizes.

Usage

Import the component and render it.

import { SegmentedControl } from 'src/components/SegmentedControl/SegmentedControl';

<SegmentedControl
  size="sm"
  value="second"
  items={[{"value":"first","label":"First"},{"value":"second","label":"Second"},{"value":"third","label":"Third"}]}
  aria-label="View"
/>

Accessibility

Role: radiogroup (named with aria-label) of Segment radios.

Key	Action
`Tab`	Moves into the group, to the selected segment, and out of it
`→ / ↓`	Moves focus to the next segment (wraps), without selecting it
`← / ↑`	Moves focus to the previous segment (wraps), without selecting it
`Home / End`	Moves focus to the first / last segment
`Enter / Space`	Selects the focused segment

Arrow keys move focus without selecting because Figma draws Focus on a segment that is not selected.
Only one segment is in the Tab order: the selected one (the first when none is).

Size

Set the size prop: Small is "sm", Large is "lg".

Small

Large

<SegmentedControl
  size="sm"
  items={[{"value":"first","label":"First"},{"value":"second","label":"Second"},{"value":"third","label":"Third"}]}
  aria-label="View"
/>
<SegmentedControl
  size="lg"
  items={[{"value":"first","label":"First"},{"value":"second","label":"Second"},{"value":"third","label":"Third"}]}
  aria-label="View"
/>

Selection

Set the value prop: First is "first", Second is "second", Third is "third".

First

Second

Third

<SegmentedControl
  value="first"
  items={[{"value":"first","label":"First"},{"value":"second","label":"Second"},{"value":"third","label":"Third"}]}
  aria-label="View"
/>
<SegmentedControl
  value="second"
  items={[{"value":"first","label":"First"},{"value":"second","label":"Second"},{"value":"third","label":"Third"}]}
  aria-label="View"
/>
<SegmentedControl
  value="third"
  items={[{"value":"first","label":"First"},{"value":"second","label":"Second"},{"value":"third","label":"Third"}]}
  aria-label="View"
/>

States

Disabled comes from the disabled prop. Hover, Focus and Pressed follow the pointer and the keyboard: try them in the playground.

Default

Disabled

<SegmentedControl
  items={[{"value":"first","label":"First"},{"value":"second","label":"Second"},{"value":"third","label":"Third"}]}
  disabled
  aria-label="View"
/>

Composition

Use the following composition to build a SegmentedControl:

SegmentedControl
└── Segment

Segment

One option of a Segmented Control: a label that is either selected (raised) or not. Only used inside SegmentedControl.

Segment

<Segment label="Second" />

Actions

Pass callbacks to respond to the component.

import { SegmentedControl } from 'src/components/SegmentedControl/SegmentedControl';

<SegmentedControl
  size="sm"
  value="second"
  items={[{"value":"first","label":"First"},{"value":"second","label":"Second"},{"value":"third","label":"Third"}]}
  aria-label="View"
  onValueChange={(value) => console.log(value)}
/>

Callback	When
`onValueChange`	Called with the value of the newly selected item.