Checkbox

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

Storybook Исходники Figma

Пропсы корня

Проп	Тип	По умолчанию
`variant`	`CheckboxVariant`	`'primary'`
Визуальный вариант чекбокса для переключения темы или контекста.
`size`	`CheckboxSize`	`'md'`
Размер чекбокса и его визуального маркера.
`ref`	`Ref<HTMLLabelElement>`	—
Ref на нативный элемент label.

Также принимает все атрибуты <label>.

Дочерние части

CheckboxInput: нативный <input type="checkbox">. Принимает checked, defaultChecked, onChange, disabled, name, value и indeterminate.
CheckboxIndicator: видимая поверхность чекбокса.
CheckboxCheckedIcon: необязательная иконка отмеченного состояния.
CheckboxIndeterminateIcon: необязательная иконка неопределённого состояния.

`CheckboxInput`

Проп	Тип	По умолчанию
`indeterminate`	`boolean`	—
Задаёт нативное свойство `indeterminate` поля. Часто используется, когда выбраны только некоторые вложенные элементы. У него нет HTML-атрибута, поэтому оно применяется императивно.
`ref`	`Ref<HTMLInputElement>`	—
Необязательный `ref` даёт прямой доступ к нижележащему элементу `<input type="checkbox">` для сложных сценариев, например управления фокусом или императивной проверки состояния.

Также принимает все атрибуты <input>.

`CheckboxIndicator`

Также принимает все атрибуты <div>.

`CheckboxCheckedIcon`

Проп	Тип	По умолчанию
`size`	`IconSize`	—
Предопределённый токен размера иконки. Может быть переопределён явными шириной и высотой.
`ref`	`Ref<SVGSVGElement>`	—
Ref на SVG-элемент
`strokeWidth`	`number`	—
Толщина обводки линий и фигур SVG (в px или pt).
`children`	`ReactNode`	—
Содержимое иконки (обязательно). Принимает: иконки из `~/icons`; собственный встроенный SVG; компоненты иконок сторонних библиотек (например, Lucide, Tabler)

Также принимает все HTML-атрибуты.

`CheckboxIndeterminateIcon`

Проп	Тип	По умолчанию
`size`	`IconSize`	—
Предопределённый токен размера иконки. Может быть переопределён явными шириной и высотой.
`ref`	`Ref<SVGSVGElement>`	—
Ref на SVG-элемент
`strokeWidth`	`number`	—
Толщина обводки линий и фигур SVG (в px или pt).
`children`	`ReactNode`	—
Содержимое иконки (обязательно). Принимает: иконки из `~/icons`; собственный встроенный SVG; компоненты иконок сторонних библиотек (например, Lucide, Tabler)

Также принимает все HTML-атрибуты.

Типы

CheckboxProps
CheckboxInputProps
CheckboxIndicatorProps
CheckboxCheckedIconProps
CheckboxIndeterminateIconProps
CheckboxVariant
CheckboxSize

Модель состояния

Состояние отметки живёт на CheckboxInput, как у нативного чекбокса: неконтролируемое через defaultChecked, контролируемое через checked и onChange.
indeterminate на CheckboxInput задаёт нативное свойство indeterminate. Обычно это визуальное состояние частичного выбора.
Checkbox отвечает только за size и variant; useCheckboxContext передаёт их собственным частям.