Data EntryСпецификация компонента·версия 1.5.0·Открыть в Figma

CheckBox

Связанный компонент: CheckBoxGroup (10560:111515)

1. Key Principles of Use

What it is

CheckBox — элемент выбора одного или нескольких значений из набора. Поддерживает три состояния: снято, выбрано, частично выбрано (indeterminate).

When to use

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

Don't use — для выбора одного из взаимоисключающих вариантов (используйте RadioBox).

2. Anatomy

СлотПропОписание
control—Сам флажок
labelhasLabel=YesТекстовая метка
descriptionhasDescription=YesДополнительное описание под лейблом

3. Variants

Figma Component Sets

Имя в FigmaРазмер
CheckBoxSS
CheckBoxMM
CheckBoxLL

Value (состояние выбора)

ValueСемантикаCSS
EmptyНе выбранunchecked
SingleВыбранchecked
MultipleЧастично (indeterminate)indeterminate

View

ViewОписание
DefaultСтандартный
NegativeОшибка / невалидный выбор

Внимание: hasLabel и hasDescription используют Yes/No вместо стандартных True/False.

Внимание: в CheckBoxS Disabled=false/true (нижний регистр), в M и L — False/True.

4. Sizes

T-shirtКонтекст
SКомпактные формы, тулбары
MСтандартные формы — дефолт
LTouch-first

5. States

СостояниеFigma-пропОписание
uncheckedValue=EmptyНе выбран
checkedValue=SingleВыбран
indeterminateValue=MultipleЧастично
negativeView=NegativeОшибка / невалидный выбор
disabledDisabled=TrueНедоступен

7. Accessibility

АтрибутЗначениеКогда
<input type="checkbox">—Всегда
<label>—hasLabel=Yes
aria-checked="mixed"—Value=Multiple (indeterminate)
aria-invalid="true"—View=Negative
disabled—Disabled=True
Нашли расхождение документации и библиотеки — напишите команде.Сообщить о расхождении