For a standalone option with a label, a description and validation use CdsCheckbox — states, colors and groups work the same way here and are described in detail on its page.

Basic example

The control is driven through v-model, indeterminate shows the intermediate state, disabled blocks the choice. There is no visible label, so add an aria-label — that way the control stays clear for screen readers.

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

Props

Name	Type	Default	Description
activeColor	string | undefined	—	Color of the component in its active state
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
color	string | undefined	—	Component color
defaultsTarget	string | undefined	—	Name of the child component the group prop values are passed to as defaults
description	string | undefined	—	Description of the component, shown under the label
direction	"horizontal" | "vertical" | undefined	'horizontal'	Switches the component between horizontal and vertical layout.
disabled	boolean | null | undefined	null	Disabled state
error	boolean | undefined	—	Puts the component into the visual error state
falseIcon	IconValue | undefined	'checkbox-off'	Icon of the unselected state
falseValue	any	—	Value for the false state.
id	string | undefined	—	Unique identifier of the component
indeterminate	boolean | undefined	—	Indeterminate state of the checkbox.
indeterminateIcon	IconValue | undefined	'checkbox-indeterminate-fill'	Icon shown in the indeterminate state.
inline	boolean | undefined	—	Renders the control as an inline element — the container does not stretch to the full width
label	string | undefined	—	Label text of the component
modelValue	any	—	Value of the component (v-model). In a group it is the value of the selected control, with multiple — an array of the selected values
multiple	boolean | null | undefined	null	Allows selecting several values — the model becomes an array. Turns on automatically when an array is passed to modelValue
name	string | undefined	—	The name attribute of the native input element. In a group one name joins all the nested controls
readonly	boolean | null | undefined	null	Read-only state
textColor	string | undefined	—	Text color of the component
theme	string | undefined	—	Component theme
trueIcon	IconValue | undefined	'checkbox-on-fill'	Icon of the selected state
trueValue	any	—	Value for the true state.
type	string | undefined	—	Type of the native input element — radio or checkbox, for example
value	any	—	Value used when the component is selected inside a group. When it is not set, a unique identifier is used.
valueComparator	ValueComparator | undefined	true	Function comparing the model value with the value of the control. Deep comparison by default

Events

Name	Type	Description
update:indeterminate	[value: boolean]	Fired when the indeterminate state of the checkbox changed
update:modelValue	[value: boolean]	Fired when the checkbox was toggled. Passes the new state

Slots

Name	Type	Description
default	{ backgroundColorClasses: Ref<string[], string[]>; backgroundColorStyles: Ref<CSSProperties, CSSProperties>; }	Default slot
description	{ description: string | undefined; props: Record<string, any>; }	Default slot of the CdsDescription component
input	SelectionControlSlot	Slot for the default input element.
label	{ label: string | undefined; props: Record<string, any>; }	Default slot of the CdsLabel component