Segmented control

The background slides to the option you choose instead of cutting to it, so you see where you were and where you went.

Variant

Controls

valueselect

▾

ariaLabelstring

glyphboolean

Code

import { SegmentedControl } from "@/components/ui/kit/ui";

<SegmentedControl
  value="one"
  ariaLabel="Choose a view"
  options={options}
  onChange={setValue}
/>

Every state

Usage

Use it to switch between two to four views of the same content.

Don’t

Don’t use it to move to another page; use links.
Don’t give it more than four options.

Tokens it uses

Tokens it uses
--ink	…
--paper	…
--line-control	…
--line-2	…
--muted	…
--font-label	…
--dur-base	…
--ease-in-out	…

Values are read live from the stylesheet, so they follow the site theme.

Spec

Trigger: Select
Duration: --dur-base 240ms
Easing: --ease-in-out cubic-bezier(0.65, 0, 0.35, 1)
Reduced motion: The background lands on the chosen option at once.

Used in

Design system page