Segmented control
Switch between a small set of related views.
pnpm dlx shadcn@latest add @uiarc/segmented-controlLive · keyboard ready
- Two to five short view options like Day, Week, and Month.
- Toolbar toggles between layouts or modes that apply immediately.
- Use tabs when each option swaps a panel of content.
- Use radio-group in forms or when options need descriptions.
- Use switch for a single on and off setting.
Installation
Add Segmented control with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/segmented-controlAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import SegmentedControl from "@/registry/components/segmented-control/segmented-control"; export function RangeToggle() { const [range, setRange] = useState("week"); return ( <SegmentedControl label="Range" value={range} onValueChange={setRange} options={[ { value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month" }, ]} /> );}SegmentedControl
A row of toggle buttons with one selection pill that slides between them. Default export.
PropTypeDefaultDescription
optionsRequired{ value: string; label: string; accessory?: ReactNode }[]–Segments in order. An accessory, such as a badge, renders after the label.valueRequiredstring–Selected value.onValueChangeRequired(value: string) => void–Called with the chosen segment's value, from a click or the arrow, Home and End keys.labelstring–aria-label for the group.onOptionIntent(value: string) => void–Called when the pointer or focus reaches a segment before it is chosen, to start loading what it shows.classNamestring–Extra class on the root.- Tab
- Moves focus into the control, onto the selected segment, and out again.
- Arrow keys
- Select and focus the previous or next segment, wrapping at the ends.
- HomeorEnd
- Select the first or last segment.
- Renders role="group" labelled by label, with native buttons using aria-pressed for the selected segment. Only the selected segment is a tab stop.
- The sliding pill is aria-hidden.
- A shared layoutId pill slides to the selected segment on the morph spring, scoped per instance by a LayoutGroup.
- Reduced motion moves the pill instantly and disables button transitions.
- The row is inline with max-width 100% and scrolls horizontally with a hidden scrollbar when segments do not fit.
- Segments never shrink or wrap, so keep labels short on mobile.
- One shared layoutId pill per instance, scoped by a LayoutGroup; no observers.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for two to five short, mutually exclusive view options like time ranges or layouts. Use tabs when each option swaps a panel, and radio-group in forms.
- Always controlled. Import it as a default export.
The full library index for assistants is at /llms.txt.