Checkbox

Checkbox — составной компонент выбора «да / нет» на Ark Checkbox.

Checkbox.Root рендерит <label> и задаёт цвет, размер и скругление, части внутри него свободно комбинируются: Checkbox.Control — квадрат с галочкой, Checkbox.Label — текст. Клик по любой части переключает состояние, скрытый инпут формы Root добавляет сам.

Состояние ведётся контролируемо (пара checked / onCheckedChange) или неконтролируемо (defaultChecked). Для мультивыбора чекбоксы оборачивают в Checkbox.Group — она держит value (string[]) и onValueChange, а вложенным Checkbox.Root достаточно передать свой value.

Используется в: Cell

Показывать выполненные задачи

Анатомия

Checkbox.Root (label)

Control

Indicator (CheckIcon)

Label

HiddenInput

Примеры

Группа (мультивыбор)

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

Электронная почтаPush-уведомленияSMS

Вариант

Смысловой вариант — задаёт цвет отмеченного чекбокса: primary — акцент (по умолчанию), secondary — второстепенный, success / warning / danger — семантические статусы, default — нейтральный.

Внешний вид

Внешний вид отмеченного состояния: solid — сплошная заливка, outline — обводка и галочка цветом варианта без заливки, dashed — та же обводка пунктиром, ghost — приглушённая подложка. Неотмеченный квадрат при любом appearance выглядит одинаково — нейтральная рамка, иначе чекбокс терял бы очертания.

Размер

Размер задаётся на Checkbox.Root и управляет и квадратом, и шрифтом Checkbox.Label; галочка масштабируется вместе с квадратом. xs — для плотных списков и таблиц, sm — базовый, md и крупнее — для акцентных переключателей.

Скругление

Скругление углов квадрата — от прямых none до circle (круглый чекбокс, визуально близкий к радио).

nonesmlgcircle

Отключённый

disabled отключает чекбокс: он тускнеет (opacity 0.5) и не реагирует на клики, значение при этом сохраняется. readOnly — состояние видно, но переключить нельзя.

Отключён и отмеченОтключён

API

Prop	Type	Default
`children` Части чекбокса: Checkbox.Control и Checkbox.Label. Root рендерит `<label>`, поэтому клик по любой части переключает состояние	`ArkCheckboxRootProps["children"]`	-
`variant` Смысловой вариант — задаёт цвет отмеченного чекбокса	`Variant`	`"primary"`
`appearance` Внешний вид отмеченного состояния: сплошная заливка, обводка (сплошная или пунктирная) или приглушённая подложка. Неотмеченный чекбокс всегда нейтральный	`Appearance`	`"solid"`
`size` Размер чекбокса: квадрат-контрол и шрифт лейбла	`Size`	`sm`
`radius` Скругление углов квадрата: circle — круглый чекбокс	`Radius`	`sm`
`checked` Контролируемое состояние. Пара с onCheckedChange.	`ArkCheckboxRootProps["checked"]`	-
`defaultChecked` Начальное состояние для неконтролируемого чекбокса — когда вести состояние вручную не нужно.	`ArkCheckboxRootProps["defaultChecked"]`	-
`onCheckedChange` Колбэк смены состояния: получает { checked }, где checked — true \| false \| "indeterminate".	`ArkCheckboxRootProps["onCheckedChange"]`	-
`disabled` Отключает чекбокс: он тускнеет и не реагирует на клики.	`ArkCheckboxRootProps["disabled"]`	-
`readOnly` Только для чтения: состояние видно, но переключить нельзя.	`ArkCheckboxRootProps["readOnly"]`	-
`required` Обязательное поле формы.	`ArkCheckboxRootProps["required"]`	-
`value` Значение чекбокса при отправке формы и для привязки к Checkbox.Group.	`ArkCheckboxRootProps["value"]`	`"on"`

Наследуется от ComponentProps<typeof ArkCheckbox.Root>

Checkbox.Control

Квадрат-контрол с галочкой; размер, скругление и цвет отмеченного состояния берёт с Checkbox.Root.

Компонент не принимает пропсов.

Checkbox.Label

Текст рядом с квадратом — шрифт задаёт размер с Checkbox.Root.

Prop	Type	Default
`children`* Текст лейбла — шрифт задаёт размер с Checkbox.Root	`ReactNode`	-

Checkbox.Group

Группа чекбоксов для мультивыбора: держит value (string[]) и onValueChange, вложенные Checkbox.Root биндятся к ней по своему value.

Prop	Type	Default
`children` Вложенные Checkbox.Root — биндятся к группе по своему value.	`ArkCheckboxGroupProps["children"]`	-
`value` Контролируемый список выбранных значений. Пара с onValueChange.	`ArkCheckboxGroupProps["value"]`	-
`defaultValue` Начальный список выбранных значений для неконтролируемой группы.	`ArkCheckboxGroupProps["defaultValue"]`	-
`onValueChange` Колбэк смены выбора: получает массив значений отмеченных чекбоксов.	`ArkCheckboxGroupProps["onValueChange"]`	-
`disabled` Отключает всю группу разом.	`ArkCheckboxGroupProps["disabled"]`	-

Наследуется от ComponentProps<typeof ArkCheckbox.Group>