# Segmented control

A React component in [Beamline](https://beamline.io/)'s [Form controls](https://beamline.io/components/forms) category, in the free sample. Live demo: https://beamline.io/components/segmented-control

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](https://beamline.io/components/tabs)).
- Options people must read as sentences or that carry a description each ([radio-group](https://beamline.io/components/radio-group), [radio-cards](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Form controls

- [Allocation editor](https://beamline.io/components/allocation-editor): Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
- [Billing toggle](https://beamline.io/components/billing-toggle): Monthly or yearly: a segmented control whose yearly note turns into what the choice saves.
- [Calendar](https://beamline.io/components/calendar): Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
- [Checkbox](https://beamline.io/components/checkbox): A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
- [Chip group](https://beamline.io/components/chip-group): Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N more”.
- [Color Palette](https://beamline.io/components/color-palette): A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
- [Colour picker](https://beamline.io/components/color-picker): A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
- [Combobox](https://beamline.io/components/combobox): One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
- [Date picker](https://beamline.io/components/date-picker): One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
- [Date range picker](https://beamline.io/components/date-range-picker): A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
- [File drop zone](https://beamline.io/components/file-dropzone): A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
- [Form](https://beamline.io/components/form): Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
- [Inline edit](https://beamline.io/components/inline-edit): Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
- [Input](https://beamline.io/components/input): A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
- [Input Dissolve](https://beamline.io/components/input-dissolve): A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
- [Label](https://beamline.io/components/label): The text label tied to a form control, with a required marker that screen readers announce.
- [Mention input](https://beamline.io/components/mention-input): A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
- [Multi-select](https://beamline.io/components/multi-select): Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
- [Number field](https://beamline.io/components/number-field): A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
- [OTP input](https://beamline.io/components/otp-input): A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
- [Password field](https://beamline.io/components/password-field): A password field with a reveal control, and a strength meter when a password is being created.
- [Phone input](https://beamline.io/components/phone-input): A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
- [Radio cards](https://beamline.io/components/radio-cards): One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
- [Radio group](https://beamline.io/components/radio-group): One choice from a short visible set, each option with an optional description, vertical or in a row.
- [Rich text editor](https://beamline.io/components/rich-text-editor): A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
- [Search field](https://beamline.io/components/search-field): The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
- [Select](https://beamline.io/components/select): One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
- [Shortcut recorder](https://beamline.io/components/shortcut-recorder): Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
- [Signature pad](https://beamline.io/components/signature-pad): A pad for a drawn signature whose ink thins with speed; undo, replay, PNG or SVG export, and typing instead for keyboards and screen readers.
- [Slider](https://beamline.io/components/slider): A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
- [Switch](https://beamline.io/components/switch): A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
- [Tag input](https://beamline.io/components/tag-input): Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
- [Textarea](https://beamline.io/components/textarea): Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
- [Time picker](https://beamline.io/components/time-picker): A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
- [Toggle group](https://beamline.io/components/toggle-group): Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.