Segmented Control

segmented-controlControls

One pressed option out of a few, never none.

$ pnpm dlx shadcn@latest add @pluginui/core-segmented-control
Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.

Pulls in

control-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-segmented-control.json

Usage

Connect the documented props to your application or host.

example.tsx
import { SegmentedControl } from "@/components/ui/segmented-control"

<SegmentedControl
  aria-label="Playing surface"
  value={view}
  options={[
    { value: "keys", label: "Keys" },
    { value: "pads", label: "Pads" },
  ]}
  onValueChange={setView}
  size="sm"
/>
About Segmented Control

A pill track of exclusive choices used throughout panels, such as Keys or Pads, Wave or Spectrum, and Off, Cycle or Random. Selection never empties: pressing the selected option reselects it, allowing the host to write a default explicitly rather than deselecting. Arrow keys move the selection, the kit's three control heights size it, and long lists can wrap. It uses Base UI's toggle group, so assistive technology sees a real radio group.

Props

PropTypeDefaultDescription
value / onValueChangeValue | undefined / (value: Value) => void—The pressed option and the change when another is pressed.
variant"default" | "panel""default"Panel uses an accent-filled selection, neutral track and inherited corner radius; selection and keyboard behavior stay the same.
options{ value, label, disabled? }[]—The segments, in order.
onReselect(value: Value) => void—Pressing the already-pressed option; it never unpresses.
size / wrap"sm" | "md" | "lg" / boolean—Control height, and whether many options may wrap onto lines.

Interaction

  • Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
  • Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
  • Double-click resets to defaultValue.
  • Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
  • Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
  • The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.
All controlsStart building