SegmentedControl

A compact single-choice control for two to five options. It is a radiogroup: arrow keys move the selection and only the selected segment is in the tab order.

Examples

Range

Range: week

Show code

let range = $state("week");
const options = [
  { value: "day", label: "Day" },
  { value: "week", label: "Week" },
  { value: "month", label: "Month" },
];

<SegmentedControl {options} bind:value={range} aria-label="Range" />

Props

Prop	Type	Default	Description
`options`	`{ value: string; label: string; disabled?: boolean }[]`	`—`	The segments, in order.
`value`	`string`	`first option's value`	The selected value. Bind it with bind:value.

The selected segment uses the same ink fill as a solid Button, so "selected" looks the same everywhere in the library. Pass aria-label to name the group.