SegmentedControl

Live demo

Showing this month. Tab in, then use the arrow keys.

How to use it

Two to four mutually exclusive views of the same content, like Week / Month / Year.

Provide options (value, label), value/onChange or defaultValue, and label for screen readers.
The thumb slides with the spring easing; Enamel paints it yellow with an ink border.
Keyboard: the group is one tab stop; arrow keys move and select, Home and End jump to the first and last option.

Don't: more than four options, or use it for navigation between unrelated pages (use TabBar).

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { SegmentedControl } from 'enma/react';

<SegmentedControl
  label="Range"
  value={range}
  onChange={setRange}
  options={[
    { value: 'week', label: 'Week' },
    { value: 'month', label: 'Month' },
    { value: 'year', label: 'Year' },
  ]}
/>

This component needs JavaScript for its behaviour. Outside React, port it with the same classes and props, as described in Other platforms.

Props

`SegmentedControlProps`

Props of SegmentedControlProps
Prop	Type	Description
`options` required	{ value: string; label: React.ReactNode }[]
`value`	string
`defaultValue`	string
`onChange`	(value: string) => void
`label`	string	Accessible name of the group.
`block`	boolean
`className`	string
`style`	React.CSSProperties