Перейти к содержимому

CoreCheckbox

Примеры использования и документация.

Выбор одного или нескольких независимых вариантов: подпись рядом с квадратом делает область клика крупной, а выбранное состояние — очевидным. Используйте для согласий, настроек и фильтров, где пользователь управляет каждым пунктом отдельно — не взаимно исключающим выбором, как радиокнопки.

Технические детали: v-model boolean, подпись — слот default справа от чекбокса, три размера (sm/md/lg, 16/18/20px), error выставляет aria-invalid, disabled блокирует ввод. Нативный inputtype=checkbox с appearance: none и кастомным стилем: unchecked — рамка fg (контрастна в обеих темах), checked — фон токена primary и белая галочка (data-URI SVG, т.к. uno-классы конфликтуют с background-color); focus — outline по :focus-visible, hover — только на устройствах с курсором. flow — активный чекбокс: галочка на анимированном градиенте цветов темы (два слоя фона, анимация 9s, prefers-reduced-motion — статичный градиент).

Каналы уведомлений

чекбоксы: false / true / каналы: 1