Checkbox и Checkbox Group

Checkbox — это базовый компонент для выбора одного или нескольких значений из набора опций. В Ant Design он предоставляет гибкий API, удобный для управления состоянием, кастомизации и интеграции с формами.

Основное использование Checkbox

import { Checkbox } from 'antd';
import React, { useState } from 'react';

const SingleCheckbox = () => {
  const [checked, setChecked] = useState(false);

  const handleChange = e => {
    setChecked(e.target.checked);
  };

  return (
    <Checkbox checked={checked} onCha nge={handleChange}>
      Выберите меня
    </Checkbox>
  );
};
  • checked — управляет состоянием компонента (выбран или нет).
  • onChange — событие, срабатывающее при изменении состояния. В объекте события e.target.checked возвращает true или false.
  • Можно использовать defaultChecked для начальной установки состояния, если не требуется контролируемый компонент.
<Checkbox defaultChecked>Начально выбран</Checkbox>

Свойства Checkbox

  • disabled — делает чекбокс неактивным.
  • indeterminate — промежуточное состояние (частично выбран), особенно полезно для групп чекбоксов.
  • value — значение, которое передаётся при использовании в Checkbox Group.
  • style / className — кастомизация внешнего вида через стили.

Пример с disabled и indeterminate:

<Checkbox indeterminate={true}>Частично выбран</Checkbox>
<Checkbox disabled>Недоступно</Checkbox>

Checkbox Group

Checkbox.Group используется для объединения нескольких чекбоксов в логическую группу и упрощает работу с множественным выбором.

import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Pear', value: 'pear' },
  { label: 'Orange', value: 'orange' },
];

const GroupExample = () => {
  const [selectedValues, setSelectedValues] = useState(['apple']);

  const onCha nge = list => {
    setSelectedValues(list);
  };

  return <CheckboxGroup options={options} value={selectedValues} onCha nge={onChange} />;
};
  • options — массив объектов { label, value } или массив строк для автоматического создания чекбоксов.
  • value — массив выбранных значений.
  • onChange — функция, вызываемая при изменении выбранных элементов, получает массив текущих значений.

Контроль состояния через родительский компонент

Использование состояния React для управления Checkbox Group позволяет реализовать сложную логику:

const fruits = ['Apple', 'Pear', 'Orange', 'Banana'];

const ControlledGroup = () => {
  const [checkedList, setCheckedList] = useState([]);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);

  const onCha nge = list => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < fruits.length);
    setCheckAll(list.length === fruits.length);
  };

  const onCheckAllCha nge = e => {
    setCheckedList(e.target.checked ? fruits : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  return (
    <>
      <Checkbox indeterminate={indeterminate} onCha nge={onCheckAllChange} checked={checkAll}>
        Выбрать все
      </Checkbox>
      <Checkbox.Group options={fruits} value={checkedList} onCha nge={onChange} />
    </>
  );
};

Ключевые моменты:

  • indeterminate применяется для состояния «частично выбран».
  • checkAll управляет кнопкой «Выбрать все».
  • Состояние группы синхронизируется с массивом выбранных значений.

Стилизация и кастомные чекбоксы

Ant Design позволяет добавлять кастомные классы и стили:

<Checkbox style={{ color: 'blue', fontWeight: 'bold' }}>
  Кастомный стиль
</Checkbox>

Для полного контроля внешнего вида можно использовать компонент Checkbox внутри собственного контейнера с CSS.

Интеграция с Form

Checkbox и Checkbox.Group полностью совместимы с компонентом Form, что позволяет автоматически получать значения и управлять валидацией:

import { Form, Checkbox, Button } from 'antd';

const FormExample = () => {
  const onFin ish = values => {
    console.log('Выбранные значения:', values);
  };

  return (
    <Form onFin ish={onFinish}>
      <Form.Item name="fruits" label="Выберите фрукты">
        <Checkbox.Group options={['Apple', 'Pear', 'Orange']} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">Отправить</Button>
      </Form.Item>
    </Form>
  );
};
  • name — ключ для хранения значения в объекте формы.
  • Автоматическая валидация через rules работает с Checkbox.Group аналогично другим полям.

Полезные практики

  1. Использовать Checkbox.Group для управления множественным выбором вместо самостоятельного управления массивом состояний.
  2. Применять indeterminate для улучшения UX при частичном выборе.
  3. Интегрировать с Form для централизованного управления данными.
  4. Кастомизировать через style и className, но избегать чрезмерного переопределения стандартного дизайна Ant Design.

Checkbox и Checkbox.Group в Ant Design обеспечивают мощный и гибкий инструмент для работы с выбором одного или нескольких элементов, сочетая удобство интеграции с формами, управление состоянием и визуальные возможности.

Оглавление