SegmentedToggle

One choice from a short list.

Controlled

Two options, one value, one handler. The selected option takes a 10% foreground fill. The other reads at 50% and lifts on hover.

value="deposit"

const [mode, setMode] = useState<"deposit" | "withdraw">("deposit");

<SegmentedToggle
  options={[
    { value: "deposit", label: "Deposit", testId: "mode-deposit" },
    { value: "withdraw", label: "Withdraw", testId: "mode-withdraw" },
  ]}
  value={mode}
  onChange={setMode}
  aria-label="Pool action"
/>

Without testids

testId is optional. Add one on every option a playwright spec presses.

<SegmentedToggle
  options={[
    { value: "7d", label: "7 days" },
    { value: "30d", label: "30 days" },
  ]}
  value={range}
  onChange={setRange}
  aria-label="Chart range"
/>

Props

The options tuple is generic over its value type, so onChange receives the narrowed union.

optionsreadonly [SegmentedToggleOption<T>, SegmentedToggleOption<T>]required

Exactly two options. Each has a value, a label, and an optional testId that lands on the option button.

valueTrequired

The selected option's value. The toggle is controlled.

onChange(value: T) => voidrequired

Called with the pressed option's value.

aria-labelstring

Names the tablist for assistive tech.

classNamestring

Appended after the toggle's own classes. A bridge for tailwind product code.