Arc
Get Pro

Segmented control

Switch between a small set of related views.

pnpm dlx shadcn@latest add @uiarc/segmented-control
Live · 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-control

Adds 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 "@/components/arc/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.
fullWidthbooleanfalseStretch to the container's width and split it equally between the segments. Use on phones and in narrow panels.
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.
/components/segmented-control/markdown

The full library index for assistants is at /llms.txt.

TabsComponentSwitch between related content in the same context.Radio groupComponentChoose one option from a visible set.SwitchComponentA tactile toggle for settings that take effect immediately.Liquid tab barProComponentTabs with a lens selection that slides between them, swaps labels cleanly, and fills in icons as it passes.
Explore Pro
Avatar uploadProComponentClick or drop a photo onto the avatar to crop it in place with drag, pinch and zoom. It uploads through a progress ring and settles, with clear errors and retry.Emoji pickerProComponentA full emoji picker with instant search, scroll-synced categories, skin tones, recently used emoji, and a virtualized, keyboard-navigable grid.Window rangeProComponentA time window over a live area chart: drag its edges to resize, drag or flick it to pan with momentum, and the dates roll to their new values.