Segmented control

Free

One choice from a few visible options. A single elevated indicator glides to the selection, and arrow keys move it.

Source packages/ui/src/segmented-control.tsxDepends on none beyond ReactMotion 180 ms glide · ease-settle

Revenue

Reporting period for the overview.

Options

Density

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/segmented-control.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Use it for two to five short, mutually exclusive options that change a view immediately: a reporting period, a layout, a unit.

It is a radiogroup. Give it a label, keep option labels short, and handle the change in onValueChange.

For more than five options or long labels, use a select or radio cards instead.

report-period.tsx

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

const periods = [
  { value: "week", label: "Week" },
  { value: "month", label: "Month" },
  { value: "quarter", label: "Quarter" },
]

export function ReportPeriod({ value, onChange }) {
  return (
    <SegmentedControl label="Reporting period"
      value={value} onValueChange={onChange} options={periods} />
  )
}

Examples #

Two options

A binary view switch such as List and Board.

Five options

The practical maximum before labels crowd on a phone.

API reference #

Controlled. All props are required except className.

PropTypeDefaultDescription

labelstring—Accessible name for the radiogroup.

valuestring—The selected option value.

onValueChange(value: string) => void—Called on click and on arrow-key movement.

options{ value: string; label: string }[]—Two to five short options.

classNamestring—Merged onto the track.

Motion #

One raised plate travels to the chosen option on the settle curve and stretches 7% toward it mid-flight. The value and labels change at once. Under reduced motion the plate jumps and does not stretch.

320 msplate transform · ease-settle

7%mid-flight stretch

r 12 / 3 / 9track radius / padding / plate radius