Segmented Control

segmented-controlControls

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.

Bone / Studio

Loading interactive preview…

Planar / Flat

Loading interactive preview…

Midnight / Minimal

Loading interactive preview…

Ember / Vintage

Loading interactive preview…

Ink / Studio

Loading interactive preview…

Mint / Flat

Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it.

$ pnpm dlx shadcn@latest add @pluginui/core-segmented-control

Pulls in

control-theme

First time? Add the registry to your components.json once:

components.json

{
  "registries": {
    "@pluginui": "https://pluginui.com/r/{name}.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"
/>

Props

Prop	Type	Default	Description
value / onValueChange	Value \| 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 controls Start building