Checkbox

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

Storybook Исходники Figma

Обзор

Стилизация Checkbox разделена между моделью состояния корневой подписи и видимой поверхностью индикатора. Отмеченное, неопределённое, отключённое состояния и фокус согласуются через CSS-переменные уровня корня.

Публичные CSS-переменные

Product updates

Weekly digest

Переменная	Значение	Влияет на
Визуальный размер.`Checkbox`, `CheckboxIndicator`		В этом состоянии изменений не видно
Текущий цвет рамки.`Checkbox`, `CheckboxIndicator`		В этом состоянии изменений не видно
Текущий цвет фона.`Checkbox`, `CheckboxIndicator`		В этом состоянии изменений не видно
Цвет иконки.`CheckboxIndicator`		В этом состоянии изменений не видно
Обводка фокуса.`CheckboxIndicator`		В этом состоянии изменений не видно
Цвет рамки при наведении.`Checkbox`		В этом состоянии изменений не видно
Цвет рамки при нажатии.`Checkbox`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Checkbox: корень, отвечающий за стили отмеченного, неопределённого, отключённого состояний и варианта.
CheckboxIndicator: видимая поверхность элемента.
CheckboxCheckedIcon и CheckboxIndeterminateIcon: рендер иконок внутри индикатора.

Взаимодействие состояний и вариантов

variant меняет семейство цветов для отмеченного и неопределённого состояний.
Отключённое состояние переопределяет и фон, и рамку.
Фокус находится на визуально скрытом input, но отображается через индикатор.

Примеры

.brandCheckbox {
  --checkbox-br-ratio: 0.25;
}

.compactCheckbox {
  --checkbox-size: 14px;
}

Свои иконки состояний

Дочерние элементы CheckboxCheckedIcon и CheckboxIndeterminateIcon заменяют иконку по умолчанию для этого состояния. Другое состояние сохраняет свою иконку.

LTRRTL

custom-state-icons.tsx · 35 строк

import {
  Checkbox,
  CheckboxCheckedIcon,
  CheckboxIndeterminateIcon,
  CheckboxIndicator,
  CheckboxInput,
} from '@vega-ui/react';
import { Diff, Rocket } from '@vega-ui/icons';

export default function CustomStateIcons() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-12)' }}>

Что не переопределять

Не убирайте обводку фокуса без замены.
Не скрывайте разницу между неотмеченным и отмеченным или неопределённым состояниями.
Не навязывайте собственные цвета, ухудшающие читаемость отключённого состояния.