## Installation [#installation] Set up dotUI first — export your design system from the [Studio](/studio), which registers `@dotui` in your project. See [Installation](/docs/installation). npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/segmented-control ``` ```bash pnpm dlx shadcn@latest add @dotui/segmented-control ``` ```bash yarn dlx shadcn@latest add @dotui/segmented-control ``` ```bash bunx shadcn@latest add @dotui/segmented-control ``` ## Usage [#usage] Use a segmented control for a small set of mutually exclusive options — view modes, ranges, filters. It's built on `ToggleButtonGroup` with single selection, and the indicator slides between segments (React Aria's `SelectionIndicator`). ```tsx import { SegmentedControl, SegmentedControlItem, } from "@/components/ui/segmented-control" ``` ```tsx Day Week Month ``` ## Anatomy [#anatomy] A `SegmentedControl` wraps one `SegmentedControlItem` per option. Each item needs a unique `id`, which is the value the control reports as selected. ```tsx import { SegmentedControl, SegmentedControlItem, } from "@/components/ui/segmented-control" ``` ```tsx … ``` ## Selection [#selection] Selection is single-only and can never be empty (`disallowEmptySelection`). Use `defaultSelectedKeys` for uncontrolled state, or `selectedKeys` with `onSelectionChange` to control it — both are a `Set` of item ids. ```tsx const [selected, setSelected] = React.useState(new Set(['week'])) Day Week Month ``` ## Examples [#examples] ## API Reference [#api-reference]