Switch

On/off toggle. Free, MIT · Forms and input › Checkboxes and sliders

On/off toggle: a native checkbox with role="switch", so it submits with forms and toggles with Space. className/style go to the <label> wrapper, other props to the <input>.

Installation

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';

Props

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).

Related components

Checkbox — Checkboxes
Checkbox Group — Checkboxes under one label, hint, error and requirement
Radio Group — Pick exactly one option
Slider — Range slider
Histogram Range — Price range with a histogram, two thumbs and inputs
Rating Input — Star rating
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list

Previous: Radio Group · Next: Slider · All Forms and input