Segmented control

import { SegmentedControl } from "@arcadia/ui";

<SegmentedControl
  aria-label="View"
  defaultValue="list"
  items={[
    { value: "list", label: "List" },
    { value: "grid", label: "Grid" },
  ]}
/>

One option is always chosen, and pressing the current one does nothing. At md the choice is a solid pill, white with night-ink text at night and night ink with white text by day, inside a track ringed at 10%; sm keeps a quiet thumb for toolbars. The thumb is measured from the pressed item and moves on the morph spring (--ease-morph); on first paint it appears in place. Use it for two to five options; beyond that, use a Menu. An item's icon draws its filled form while the item is selected.

The solid pill is an ink layer holding a copy of the labels in the inverse colour, clipped to the pressed item, so the pill and its inverted text move as one, mid-slide included, and look the same on any surface. A blend mode would invert whatever sits behind the control, and drop the pill inside a fading dialog or a blurred page swap.

Segmented Control or Tabs? A Segmented Control picks a value: a setting, a filter, a view. When each option has its own panel of content, use Tabs with the segmented look, which adds the tab roles.

rootStyle takes where the control sits (margins, self-alignment, flex and grid placement, size bounds) and the knobs below, each a token of its kind. A colour, a raw length or any other property is a type error: a look that comes up twice becomes a variant.

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  // a looser track
  roomy: { "--segmented-pad": "var(--space-1)" },
});

<SegmentedControl items={items} rootStyle={styles.roomy} />

--segmented-solid and --segmented-solid-fg paint the solid choice at md. Tabs with the segmented look take the same knobs on their TabsList.

A toggle group: one tab stop, with arrow keys moving between the options. Give the control an aria-label (or aria-labelledby on a visible label, as in a settings row) so it is announced as "Theme" rather than a bare group.

←→

Move focus between options

EnterSpace

Choose the focused option