Segmented Control

One pick among a few, marked by a pill that slides to it.

const [range, setRange] = useState<"day" | "week" | "month">("week");
<SegmentedControl aria-label="Range" onValueChange={setRange} value={range}>  <SegmentedControlItem value="day">Day</SegmentedControlItem>  <SegmentedControlItem value="week">Week</SegmentedControlItem>  <SegmentedControlItem value="month">Month</SegmentedControlItem></SegmentedControl>;

Installation

$ npx shadcn@latest add @constella/segmented-control

Usage

import {  SegmentedControl,  SegmentedControlItem,} from "@/components/primitives/segmented-control";

<SegmentedControl onValueChange={setValue} value={value}>  <SegmentedControlItem value="a">A</SegmentedControlItem>  <SegmentedControlItem value="b">B</SegmentedControlItem></SegmentedControl>

It's always controlled, and one item is always on: clicking the picked item keeps it. Use Tabs to switch panels, and a Toggle Group when none or several can be on.

Composition

SegmentedControl└── SegmentedControlItem

Disabled

Add disabled to a SegmentedControlItem to turn one off, or to SegmentedControl for all of them.

<SegmentedControlItem disabled value="calendar">  Calendar</SegmentedControlItem>

API Reference

Part	Adds
`SegmentedControl`	`value` and `onValueChange` take one value, not an array, and are required

Every part takes sx, applied last. For the rest, see Base UI Toggle Group.