Segmented Control React component
A compact radio-style switch between a few options with a sliding animated thumb, solid or soft styles, icons, icon-only mode, vertical orientation and arrow-key navigation.
About the Segmented Control component
Segmented Control is a compact radio-style switch between a few options with a thumb that slides to the selection. It comes in solid and soft styles, takes an icon per option, can show icons only, stretch to full width or stand vertically.
It is a radiogroup with arrow-key, Home and End navigation and aria-checked on the selected option, in three sizes and dark and light themes.
When to use it
Use Segmented Control to switch between two to five views or modes that apply immediately: list or grid view, monthly or yearly billing, day, week or month in a calendar, light or dark.
For choices that are submitted with a form or have longer labels, use Radio Button; for switching between content panels, use Tabs.
Installation
Add the Segmented Control component to your project with the shadcn CLI. It lands in components/segmented-control.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/segmented-controlOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<SegmentedControl /> accepts 14 props, all optional.
| Prop | Type | Default |
|---|---|---|
| options | { value: string; label: string; icon?: React.ReactNode; disabled?: boolean }[] | DEFAULT_OPTIONS |
| value | string | — |
| defaultValue | string | — |
| onValueChange | (value: string) => void | — |
| variant | "solid" | "soft" | "solid" |
| orientation | "horizontal" | "vertical" | "horizontal" |
| fullWidth | boolean | false |
| iconOnly | boolean | false |
| label | string | — |
| size | "sm" | "md" | "lg" | "md" |
| theme | "dark" | "light" | "dark" |
| disabled | boolean | false |
- options{ value: string; label: string; icon?: React.ReactNode; disabled?: boolean }[]Default: DEFAULT_OPTIONS
- valuestring
- defaultValuestring
- onValueChange(value: string) => void
- variant"solid" | "soft"Default: "solid"
- orientation"horizontal" | "vertical"Default: "horizontal"
- fullWidthbooleanDefault: false
- iconOnlybooleanDefault: false
- labelstring
- size"sm" | "md" | "lg"Default: "md"
- theme"dark" | "light"Default: "dark"
- disabledbooleanDefault: false
Show all 14 propsShow fewer
| className | string | — |
| aria-label | string | — |
- classNamestring
- aria-labelstring
npm dependencies
Installed for you by the shadcn CLI.
Segmented Control FAQ
- How is it different from Tabs?
- Tabs switch between panels of content; Segmented Control picks a value (a view mode, a filter, a billing period) and leaves what happens to you.
- Can I show only icons?
- Yes. Give each option an icon and set iconOnly; the label is kept as the accessible name.
- Can it fill its container?
- Set fullWidth and the segments share the full width equally.
- Is it keyboard accessible?
- Yes, arrow keys move the selection, Home and End jump to the first and last option, and disabled options are skipped.
