Segmented control

A React component in Beamline's Form controls category, in the free sample.

Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.

Use it for

Switching between two to five views or ranges of the same content.
A compact choice of two to five short options in a form (gender, level, frequency), as a field with its label, help and error.

Not for

Moving between pages (tabs).
Options people must read as sentences or that carry a description each (radio-group, radio-cards).

Anatomy

track
thumb
segment (icon, label, accessory)

Variants

size: sm, md
fill: false, true
iconOnly: false, true

States

chosen
other
hover
disabled

Keyboard

Tab enters at the chosen segment
arrows move and choose
Home / End

Motion

The thumb travels as matter (ui/lib/contour.ts), shaped by the look's mechanics (--m-morph-*): in soft its corner facing the new segment answers first, its leading edge rounds out a few pixels, the middle draws a slight neck and the corners round toward a capsule while it is stretched, then it gathers into its plain box. Nothing overshoots (critically damped, ~0.26 s, the far corner a little later). Metal, blueprint and mono stay rigid (it slides and stretches with straight edges); pop stretches most; glass is a little heavier; ink thins like a brush. The choice itself is made at once (state, colour, focus); only the decorative thumb settles. At rest: no clip and no frames. Reduced motion: it jumps.

Props

Prop	Type	Default	Description
`options`	`{ value, label, icon?, accessory?, disabled? }[]`	—
`value / defaultValue / onValueChange`	`string`	—
`label`	`string`	—
`onOptionIntent`	`(value) => void`	—
`size / fill`	`"sm" \| "md" / boolean`	—
`iconOnly`	`boolean`	—	Each segment shows its icon alone, as a square; the label stays its accessible name and tooltip.
`classNames`	`SegmentedControlClassNames`	—	Classes for the documented parts.
`style / ref`	`CSSProperties / Ref`	—	Visual root style; ref targets radiogroup element (composed with indicator measurement ref).
`field / hideLabel / description / error / required / name`	`boolean / ReactNode / string`	—	A form field: label above, help or error below, on whenever the label shows; hideLabel for a view switch or quick filter (the label stays the accessible name). name submits with a native form.

Import

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

Get it

Segmented control is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Segmented control is in the free sample, which costs nothing. Get Beamline · Connect your agent