Foundation component · Forms

Segmented Control

A compact single-choice control for switching one property without introducing tab panels.

Live playground

LightDark

Choose Segmented Control when

Use Segmented Control for mutually exclusive values that update the current view in place.
Use Tabs when each choice owns a corresponding content panel.
Use width="fit" in toolbars and width="fill" in property panels.

Accessibility

Give the root an accessible label describing the property being changed.
Base UI owns radio semantics, arrow-key navigation, and single-selection behavior.

Implementation

A single-choice radio group with compact fit and full-width layout variants.

import { SegmentedControl } from "@lenso/ui/segmented-control";

<SegmentedControl.Root aria-label="Theme mode" defaultValue="light">
  <SegmentedControl.Item value="light">Light</SegmentedControl.Item>
  <SegmentedControl.Item value="dark">Dark</SegmentedControl.Item>
</SegmentedControl.Root>;