Checkbox

Чекбокс для множественного выбора из списка. Поддерживает три визуальных состояния — unchecked / checked / indeterminate — плюс disabled и loading.

Когда использовать

• Для множественного выбора из двух или более независимых опций.
• Для согласий («Я согласен с условиями»), чек-листов, фильтров.
• Для «выбрать всё» в группе — индикатор частичного выбора (indeterminate).

Когда не нужен Checkbox: для взаимоисключающего выбора — используйте Radio, для on/off настроек — Switch.

Анатомия

Size

xs — для плотных таблиц и инлайновых списков, s — дефолт в формах.

Установка

pnpm add @cloud-ru/ds-toggles

import { Checkbox } from '@cloud-ru/ds-toggles'

Примеры использования

1. Базовый чекбокс

import { Checkbox } from '@cloud-ru/ds-toggles';

export function CheckboxBasic() {
  return <Checkbox defaultChecked />;
}

2. Indeterminate

import { Checkbox } from '@cloud-ru/ds-toggles';

export function CheckboxIndeterminate() {
  return <Checkbox indeterminateDefault />;
}

3. Все состояния

import { Checkbox } from '@cloud-ru/ds-toggles';

export function CheckboxStates() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Checkbox />
      <Checkbox defaultChecked />
      <Checkbox disabled />
      <Checkbox disabled defaultChecked />
      <Checkbox loading />
    </div>
  );
}

Props

Types

CheckboxProps

Unions

Size

Storybook

Figma