Segmented Control

Переключатель режимов. Бесплатно, MIT · Навигация и каркас › Переключение

Установка

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)