ValyroUI English version

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

Пропсы

PropTypeDefault
checkedbooleanControlled checked; use with onCheckedChange.
defaultCheckedbooleanfalseInitial checked when uncontrolled.
onCheckedChange(checked: boolean) => voidCalled with the new checked when it changes.
indeterminatebooleanfalseMixed state, e.g. a "select all" box with some children checked.
labelReactNodeText next to the box; clicking it toggles the checkbox, and it names the input.
descriptionReactNodeSecondary text under the label, linked to the input with aria-describedby.
size'sm' | 'md' | 'lg''md'Box and text size.
invalidbooleanfalseRed 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 · Весь раздел «Формы и ввод»