Forms · Selection · Stable

Check / Checkbox

Три варианта: Check — базовый квадрат, может использоваться отдельно или быть вложенным в Checkbox; Checkbox / Ghost — Check с подписью (caption) и иконкой-подсказкой; Checkbox / Container — Ghost в интерактивном контейнере с hover/pressed фоном. Уникальная особенность: состояние Indeterminate для групп с частичным выбором. Все варианты поддерживают SM и MD размеры.

Размеры

SM · MD
Вариант
SM — 20px квадрат · radius 4px
MD — 24px квадрат · radius 6px
Default
Checked
Indeterminate
Disabled

Check

Базовый квадрат · может использоваться отдельно · SM · MD
Состояние
SM — 20px
MD — 24px
Примечание
Default
Рамка nba-border 1.5px
Hover
Фон nba-20 (в тёмной — nba-40)
Pressed
Фон nba-40 (в тёмной — nba-50)
Checked
Фон neutral-fill, галочка
Checked Hover
Фон neutral-fill-hover
Indeterminate
Фон neutral-fill, тире
Disabled
cursor not-allowed; border-disabled
Error
Рамка 2px neg-default
Error Checked
Фон neg-default, галочка видна
Error Indet.
Фон neg-default, тире видно

Checkbox / Ghost

Check с подписью и иконкой-подсказкой · SM · MD
Состояние
SM
MD
Примечание
Default
Рамка nba-border 1.5px
Hover
Фон nba-20 на квадрате (в тёмной — nba-40)
Checked
Фон neutral-fill
Checked Hover
Фон neutral-fill-hover
Indeterminate
Фон neutral-fill, тире
Disabled
cursor not-allowed; текст muted
Checked Disabled
disabled-fill + текст muted
Error
Рамка 2px neg-default
Error Checked
Фон neg-default, галочка видна
Error Indet.
Фон neg-default, тире видно

Checkbox / Container

Ghost в интерактивном контейнере · Hover/Pressed фон · SM · MD
Состояние
SM
MD
Примечание
Default
Без фона контейнера
Hover
Фон nba-20 на контейнере (в тёмной — nba-40)
Pressed
Фон nba-40 на контейнере (в тёмной — nba-50); квадрат как на hover
Checked
Фон neutral-fill
Checked Hover
Фон neutral-fill-hover
Indeterminate
Фон neutral-fill, тире
Disabled
cursor not-allowed; текст muted
Error
Рамка 2px neg-default
Error Checked
Фон neg-default, галочка видна
Error Indet.
Фон neg-default, тире видно
Пример — уведомления (indeterminate parent)

API

Check · Checkbox
Check
Prop
Type
Default
Description
size
'sm' | 'md'
'md'
Размер квадрата: 20px (sm) / 24px (md)
checked
boolean
false
Выбранное состояние
indeterminate
boolean
false
Неопределённое состояние (тире); приоритет над checked
disabled
boolean
false
Заблокированное состояние
validation
'negative'
—
Состояние ошибки (красная рамка / фон)
onChange
(checked: boolean) => void
—
Колбэк при изменении состояния
name
string
—
Имя поля формы
value
string
—
Значение поля формы
Checkbox
Prop
Type
Default
Description
label req
string
—
Текст метки
caption
string
—
Вспомогательная подпись под меткой
iconHelp
boolean
false
Показать иконку-подсказку рядом с меткой
variant
'ghost' | 'container'
'ghost'
Вариант отображения
size
'sm' | 'md'
'md'
Размер компонента
checked
boolean
false
Выбранное состояние
indeterminate
boolean
false
Неопределённое состояние — для групп с частичным выбором
disabled
boolean
false
Заблокированное состояние
validation
'negative'
—
Состояние ошибки
onChange
(checked: boolean) => void
—
Колбэк — получает новое значение checked
name
string
—
Имя поля формы
value
string
—
Значение поля формы

Доступность

WCAG 2.2 AA · ARIA · Keyboard
ARIA

Разметка

  • Каждый чекбокс — <input type="checkbox"> внутри <label>
  • Indeterminate → aria-checked="mixed" (не "true") — для частично выбранной группы
  • При ошибке: aria-invalid + aria-describedby → id сообщения
  • Заблокированная опция исключается из порядка табуляции (disabled)
  • Группа без заголовка → текст ошибки под группой; с заголовком → под заголовком
Клавиатура

Навигация

  • Tab — вход в группу (первый; если первый выбран → следующий невыбранный)
  • ↓ / ↑ — перемещение между чекбоксами группы
  • ← / → — переход к иконке помощи или ссылке внутри пункта
  • Enter / Space — переключить состояние чекбокса в фокусе
  • Tab повторно — выход из группы на следующий контрол
WCAG 2.2 AA

Контраст и размер

  • Текст метки: ≥ 4.5:1 против фона страницы
  • Touch target: MD ≥ 40px, SM ≥ 32px по вертикали
  • Состояние ошибки: рамка 2px — не только цвет (WCAG 1.4.1)
  • Галочка / тире: text-invert на neutral-fill — высокий контраст
  • Не использовать только цвет для индикации выбора
Focus Ring

Фокус

  • Outline 2px, цвет --ds-focus-ring-color (#6C8DFA)
  • Offset 1px — виден на любом фоне
  • Применяется к квадрату контрола, не ко всей метке
  • Виден при навигации с клавиатуры (:focus-visible)
  • Скрывается при клике мышью — не мешает визуально

Работа с клавиатурой

Tab · ↑ ↓ · ← → · Enter / Space
Клавиша
Действие
Tab
Фокус на первый чекбокс группы. Если первый уже выбран — на следующий невыбранный. Повторный Tab — выход из группы.
↓ ↑
Перемещение фокуса между чекбоксами внутри группы.
← →
Переход к иконке помощи или ссылке внутри пункта (если они есть).
Enter Space
Переключить состояние чекбокса в фокусе (выбран / не выбран).

Выбранное значение сохраняется при выходе из группы. Индикатор фокуса (рамка) появляется только при навигации с клавиатуры — при выборе мышью он не отображается.

Правила использования

Когда · Чего избегать
Правила

Когда использовать Checkbox

  • Множественный выбор — несколько опций из списка независимо друг от друга
  • Одиночное согласие / подтверждение (условия соглашения, подписка)
  • Групповые действия в таблицах — массовый выбор записей
  • Иерархический выбор с indeterminate — частично выбранная группа
  • Фильтрация данных — выделение нескольких значений
  • Располагайте чекбоксы в столбец, формулируйте метки положительно
Чего избегать

Когда НЕ использовать

  • Взаимоисключающий выбор (одна опция из набора) — используйте Radio
  • Мгновенное применение настройки (вкл/выкл) — используйте Switcher
  • Больше 5–10 опций — используйте Select или Multiselect
  • Горизонтальное расположение группы — непонятно, к чему относятся чекбоксы
  • Отрицательные формулировки («Скрывать», «Выключить») — формулируйте положительно
Взаимоисключающий выбор → Radio
Если можно выбрать только один вариант, чекбоксы вводят в заблуждение — переключитесь на Radio.

State Explorer

Интерактивный тест состояний — переключай и смотри