Checkbox
Флажки. Бесплатно, MIT · Формы и ввод › Флажки и ползунки
Установка
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. |
Похожие компоненты
- Checkbox Group — Флажки с общей подписью, подсказкой, ошибкой и обязательностью
- Radio Group — Выбор одного варианта
- Switch — Переключатель
- Slider — Ползунок
- Histogram Range — Диапазон цен с гистограммой, двумя ползунками и полями
- Rating Input — Оценка звёздами
- Text Input — Текстовые поля
- Textarea — Многострочный ввод
- Search Input — Поисковая строка
- Mentions Input — Текст с @упоминаниями и #тегами, асинхронные подсказки
- Tags Input — Ввод тегов
- Select — Выбор из списка
Назад: Checkbox Tree · Далее: Checkbox Group · Весь раздел «Формы и ввод»