Checkbox

Базовое использование

Принимаю условияПолучать рассылку

accepted: false · newsletter: true

Состояния

Подпись слотом и значение

Согласенс политикой конфиденциальности

В форму уйдут name="terms" и value="terms-accepted" только если чекбокс отмечен.

Выбрать все с indeterminate

Выбрать всеДизайнРазработкаТестирование

Выбрано 1 из 3 — сработал сценарий indeterminate.

Входные параметры

Имя	Тип	По умолчанию	Описание
`modelValue`	`boolean`	`false`	Отмечен ли чекбокс (через `v-model`).
`label`	`string`	`undefined`	Подпись рядом с чекмарком. Скрывается, если задан слот.
`value`	`string \| number`	`undefined`	Значение нативного `input` — попадёт в отправляемую форму.
`name`	`string`	`undefined`	Имя поля для отправки в формах.
`disabled`	`boolean`	`false`	Отключает чекбокс: блокирует переключение, курсор `not-allowed`, прозрачность 0.6.
`error`	`boolean`	`false`	Признак ошибки — красная рамка вокруг чекмарка и `aria-invalid="true"`.
`indeterminate`	`boolean`	`false`	Третье состояние: часть элементов выбрана. Показывает минус и `aria-checked="mixed"`.

Слоты

Имя	Описание
`default`	Содержимое подписи. Заменяет `label`, поэтому подходит для текста с разметкой.

Описание

Компонент C3Checkbox — одиночный чекбокс с подписью. Используйте его для независимых переключателей: согласие, подписка, включение фичи. Для набора вариантов есть C3CheckboxGroup с массивом значений в v-model.

Значение приходит через v-model типа boolean. Проп indeterminate добавляет третье состояние — оно нужно для сценария «выбрать все», когда отмечена только часть дочерних пунктов: чекмарс показывает минус, а сам чекбокс визуально не отмечен.

Дополнительная информация

Стили чекмарка вынесены в checkbox.scss и переиспользуются C3CheckboxGroup — оба компонента выглядят одинаково.
Нативный input скрыт, но остаётся в DOM: работает форма отправки, клавиатурная навигация (Tab, Space) и нативная семантика type="checkbox".
Весь контрол обёрнут в <label>, поэтому клик по подписи тоже переключает чекбокс.
Доступность: у чекмарка aria-hidden="true" (состояние дублируется нативным input), при error добавляется aria-invalid, при indeterminate — aria-checked="mixed". Фокус виден через focus-visible на чекмарке.
В disabled нативный input получает атрибут disabled, поэтому событие update:modelValue не эмитится.
Проп value принимает и строки, и числа — number не теряется при приведении к строке атрибута.