Segmented Control

Mode switcher. Free, MIT · Navigation and layout › Switching

Installation

npx valyro-cli@latest add segmented-control

npx shadcn@latest add https://valyro.xyz/r/segmented-control.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { SegmentedControl } from 'valyro-ui';

Prop	Type	Default
`options`	`SegmentedControlOption[]`		Segments in order; each shows a label, an icon, or both. Or compose them as children: `SegmentedControl.Item`.
`children`	`ReactNode`		The compound form instead of `options`: `SegmentedControl.Item` elements.
`value`	`string`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control height and text size.
`fullWidth`	`boolean`	`false`	Stretch to the container width with equal segments (a label wider than its share keeps its width). Either way, segments that don't fit scroll sideways with faded edges instead of truncating.
`invalid`	`boolean`	`false`	Error state, e.g. from a FormField: aria-invalid on the group (an explicit `aria-invalid` wins).
`disabled`	`boolean`	`false`	Disables every segment, like RadioGroup's `disabled`.
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the thumb springs to the chosen segment with a slight overshoot. `default`: the theme's curve.

SegmentedControl.Item (SegmentedControlItem)

Tabs — Tabs
Pagination — Page navigation
Stepper — Step-by-step progress
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode