Switch

Переключатель. Бесплатно, MIT · Формы и ввод › Флажки и ползунки

Установка

npx valyro-cli@latest add switch

npx shadcn@latest add https://valyro.xyz/r/switch.json

npm install valyro-ui

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

Prop	Type	Default
`checked`	`boolean`		Controlled `checked`; use with `onCheckedChange`.
`defaultChecked`	`boolean`	`false`	Initial `checked` when uncontrolled.
`onCheckedChange`	`(checked: boolean) => void`		Called with the new `checked` when it changes.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Track, knob and text size.
`label`	`ReactNode`		Text next to the switch; clicking it toggles the switch, and it names the input.
`description`	`ReactNode`		Secondary text under the label, linked to the input with aria-describedby.
`invalid`	`boolean`	`false`	Error state, e.g. from a FormField: aria-invalid on the input (an explicit `aria-invalid` wins).
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the knob travels with a spring (a transform, not a layout change) and the track icons swap with a pop. `default`: the theme's transition.
`startIcon`	`ReactNode`		Icon on the track's start side, uncovered while the switch is on (e.g. a sun).
`endIcon`	`ReactNode`		Icon on the track's end side, uncovered while the switch is off (e.g. a moon).
`thumbIcon`	`ReactNode`		Icon inside the knob.
`pressedWidth`	`number`		Knob width while pressed, px: it stretches into a capsule (default: the theme's stretch).