Checkbox

Checkboxes. Free, MIT · Forms and input › Checkboxes and sliders

Native checkbox with a custom box. className/style go to the <label> wrapper, other props to the <input>.

Installation

npx valyro-cli@latest add checkbox

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

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Checkbox } 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.
`indeterminate`	`boolean`	`false`	Mixed state, e.g. a "select all" box with some children checked.
`label`	`ReactNode`		Text next to the box; clicking it toggles the checkbox, and it names the input.
`description`	`ReactNode`		Secondary text under the label, linked to the input with aria-describedby.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Box and text size.
`invalid`	`boolean`	`false`	Red box border (red fill when checked) and aria-invalid on the input (an explicit `aria-invalid` wins).
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the box bounces when the user toggles it, the check draws in and the mixed dash grows from the centre. `default`: the theme's transitions.