SegmentGroup

import { SegmentGroup } from '@contour-ui/react';

<SegmentGroup.Root defaultValue="week" aria-label="Range">
  <SegmentGroup.Indicator />
  <SegmentGroup.Item value="day">
    <SegmentGroup.ItemText>Day</SegmentGroup.ItemText>
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
  <SegmentGroup.Item value="week">
    <SegmentGroup.ItemText>Week</SegmentGroup.ItemText>
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
  <SegmentGroup.Item value="month">
    <SegmentGroup.ItemText>Month</SegmentGroup.ItemText>
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
</SegmentGroup.Root>;

SegmentGroup is a set of options of which one is checked, as a group of radio buttons drawn as one control. It is the Headless SegmentGroup with the look of contour-ui: the options sit on an inset track, and the indicator, a raised surface with a border and a shadow, slides under the checked one. The checked text takes the default color and the others are muted, but the raised surface marks the choice without relying on color.

Every item holds a native radio button (SegmentGroup.ItemHiddenInput), out of sight: it takes the focus and the keys, and a form submits its value. Put the indicator first in the root.

The value

The value is the value of the checked item, or null when none is: defaultValue in a group that keeps it, or value and onValueChange to keep it yourself. onValueChange receives { value }.

const [range, setRange] = useState<string | null>('week');

<SegmentGroup.Root value={range} onValueChange={(details) => setRange(details.value)}>
  …
</SegmentGroup.Root>;

Icons

An item with an Icon and no ItemText is square. It has no text to name its radio button, so give the radio button an aria-label, as in this theme picker:

import { monitorIcon, moonIcon, sunIcon } from '@contour-ui/icons';
import { Icon, SegmentGroup } from '@contour-ui/react';

<SegmentGroup.Root defaultValue="system" aria-label="Theme">
  <SegmentGroup.Indicator />
  <SegmentGroup.Item value="light">
    <Icon icon={sunIcon} />
    <SegmentGroup.ItemHiddenInput aria-label="Light" />
  </SegmentGroup.Item>
  …
</SegmentGroup.Root>;

An icon next to a text takes the same Icon; the item then keeps its padding.

Sizes

size is sm, md (the default) or lg: the height of the control tokens, as for Button. In lg, the labels are larger and the sides wider.

Label, states and forms

• SegmentGroup.Label names the group with a muted caption at the start of the track. Without it, give the root an aria-label.
• disabled on the root disables every item; disabled on an item disables that one. Disabled items take the disabled text color and are skipped by the keys.
• readOnly shows the value, and the items still take focus, but a click or a key does not change it.
• name is the name a form submits the value under; form the id of a form the group is outside of.
• orientation="vertical" stacks the items.

Anatomy

ItemControl is a slot for a mark of your own next to the text, with no look of its own.

Props

SegmentGroup.Root:

SegmentGroup.Item takes value (required) and disabled. Every part takes asChild and the props of its element; className is merged with the part's class.

Keyboard

The keys are those of native radio buttons:

Accessibility

• The root is a radiogroup, named by SegmentGroup.Label or aria-label; each item is a native radio button, so screen readers announce "2 of 3, checked".
• An item named only by an icon needs aria-label on its ItemHiddenInput; icons are hidden from assistive technology.
• A keyboard focus shows a ring inside the item (data-focus-visible); a click does not.

Tokens