Для самостоятельной опции с лейблом, описанием и валидацией используйте CdsCheckbox — состояния, цвета и группы работают здесь так же и подробно описаны на его странице.

Базовый пример

Контрол управляется через v-model, indeterminate показывает промежуточное состояние, disabled блокирует выбор. Видимого лейбла нет, поэтому добавьте aria-label — так контрол останется понятным для скринридеров.

Sandbox Storybook

<script setup lang="ts">
import { CdsCheckboxButton } from '@central-design-system/components';
import { ref } from 'vue';

const checked = ref(true);
</script>

<template>
  <div class="flex justify-center items-center gap-2">
    <CdsCheckboxButton v-model="checked" aria-label="Выбрать элемент" />
    <CdsCheckboxButton indeterminate aria-label="Выбрана часть элементов" />
    <CdsCheckboxButton :model-value="true" disabled aria-label="Выбор недоступен" />
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
color	string | undefined	—	Цвет компонента
defaultsTarget	string | undefined	—	Имя дочернего компонента, которому пробрасываются значения пропсов группы по умолчанию
description	string | undefined	—	Описание компонента, отображаемое под меткой
direction	"horizontal" | "vertical" | undefined	'horizontal'	Переключение между горизонтальным или вертикальным отображением.
disabled	boolean | null | undefined	null	Заблокированное состояние
error	boolean | undefined	—	Переводит компонент в визуальное состояние ошибки
falseIcon	IconValue | undefined	'checkbox-off'	Иконка невыбранного состояния
falseValue	any	—	Значение для false состояния.
id	string | undefined	—	Уникальный идентификатор компонента
indeterminate	boolean | undefined	—	Неопределенное состояние чекбокса.
indeterminateIcon	IconValue | undefined	'checkbox-indeterminate-fill'	Иконка для отображения в неопределенном состоянии.
inline	boolean | undefined	—	Отображает контрол как inline-элемент — контейнер не растягивается на всю ширину
label	string | undefined	—	Текст метки (label) компонента
modelValue	any	—	Значение компонента (v-model). В группе — значение выбранного контрола, при multiple — массив выбранных значений
multiple	boolean | null | undefined	null	Разрешает выбор нескольких значений — модель становится массивом. Включается автоматически, если в modelValue передан массив
name	string | undefined	—	Атрибут name нативного элемента input. В группе одно имя объединяет все вложенные контролы
readonly	boolean | null | undefined	null	Только для чтения
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
trueIcon	IconValue | undefined	'checkbox-on-fill'	Иконка выбранного состояния
trueValue	any	—	Значение для true состояния.
type	string | undefined	—	Тип нативного элемента input — например, radio или checkbox
value	any	—	Значение, используемое при выборе компонента в группе. Если оно не указано, будет использоваться уникальный идентификатор.
valueComparator	ValueComparator | undefined	true	Функция сравнения значения модели со значением value контрола. По умолчанию — глубокое сравнение

События

Имя	Тип	Описание
update:indeterminate	[value: boolean]	Сработало при смене промежуточного состояния чекбокса
update:modelValue	[value: boolean]	Сработало при переключении чекбокса. Передаёт новое состояние

Слоты

Имя	Тип	Описание
default	{ backgroundColorClasses: Ref<string[], string[]>; backgroundColorStyles: Ref<CSSProperties, CSSProperties>; }	Слот по-умолчанию
description	{ description: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsDescription
input	SelectionControlSlot	Слот для элемента ввода по умолчанию.
label	{ label: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsLabel