Checkbox и его состояния

Компонент Checkbox в библиотеке MUI представляет собой стандартный элемент формы для выбора одного или нескольких вариантов. Он основан на элементе HTML <input type="checkbox">, но предоставляет расширенные возможности стилизации и интеграции с React.

Импорт и базовое использование

Для использования Checkbox необходимо импортировать его из пакета @mui/material:

import Checkbox from '@mui/material/Checkbox';

Простейший пример отображения чекбокса:

<Checkbox />

По умолчанию чекбокс находится в неактивном состоянии (unchecked). Для управления состоянием используется свойство checked.

import { useState } from 'react';

function ControlledCheckbox() {
  const [checked, setChecked] = useState(false);

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

  return <Checkbox checked={checked} onCha nge={handleChange} />;
}

Здесь ключевой момент — управляемый компонент, где состояние чекбокса полностью контролируется через React state.

Неуправляемый чекбокс

Checkbox может использоваться и без состояния React:

<Checkbox defaultChecked />

defaultChecked задаёт начальное состояние, после чего компонент ведет себя как обычный uncontrolled элемент.

Свойства Checkbox

  • checked: boolean, управляет состоянием выбора.
  • defaultChecked: boolean, задает начальное состояние.
  • onChange: функция, вызываемая при изменении состояния.
  • disabled: boolean, делает чекбокс неактивным.
  • indeterminate: boolean, устанавливает промежуточное состояние, отображаемое как горизонтальная линия.
  • color: определяет цвет выбранного состояния (primary, secondary, success, error, info, warning, default).

Промежуточное состояние (Indeterminate)

Checkbox поддерживает промежуточное состояние, которое удобно использовать для выбора подмножеств в списках:

<Checkbox
  checked={isChecked}
  indeterminate={isIndeterminate}
  onCha nge={handleChange}
/>
  • indeterminate — не true и не false, а промежуточное.
  • Обычно используется, когда часть подэлементов выбрана, но не все.

Использование с FormControlLabel

Для удобного отображения подписи рядом с чекбоксом применяется компонент FormControlLabel:

import FormControlLabel from '@mui/material/FormControlLabel';

<FormControlLabel
  control={<Checkbox checked={checked} onCha nge={handleChange} />}
  label="Принять условия"
/>

FormControlLabel обеспечивает правильную разметку и доступность (a11y).

Стилизация Checkbox

MUI позволяет кастомизировать внешний вид чекбоксов:

<Checkbox
  checked={checked}
  onCha nge={handleChange}
  sx={{
    color: 'green',
    '&.Mui-checked': {
      color: 'darkgreen',
    },
  }}
/>
  • Свойство sx используется для быстрого изменения стилей.
  • &.Mui-checked применяется для состояния выбора.
  • Можно использовать кастомные иконки через свойства icon и checkedIcon.
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';

<Checkbox
  icon={<CheckBoxOutlineBlankIcon />}
  checkedIcon={<CheckBoxIcon />}
/>

Управление группой чекбоксов

Для нескольких чекбоксов удобно использовать массив состояний:

const options = ['Option 1', 'Option 2', 'Option 3'];
const [checkedItems, setCheckedItems] = useState([]);

const handleChange = (event) => {
  const { name, checked } = event.target;
  setCheckedItems((prev) =>
    checked ? [...prev, name] : prev.filter((item) => item !== name)
  );
};

options.map((option) => (
  <FormControlLabel
    key={option}
    control={
      <Checkbox
        name={option}
        checked={checkedItems.includes(option)}
        onCha nge={handleChange}
      />
    }
    label={option}
  />
));
  • Использование массива позволяет легко отслеживать выбранные элементы.
  • Для indeterminate состояния можно вычислять его по длине массива выбранных элементов относительно общего числа.

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

Checkbox хорошо интегрируется с популярными форм-менеджерами:

Formik:

import { Field } from 'formik';

<Field name="acceptTerms" type="checkbox" as={Checkbox} />

React Hook Form:

import { useForm, Controller } from 'react-hook-form';

<Controller
  name="acceptTerms"
  control={control}
  render={({ field }) => <Checkbox {...field} />}
/>

Доступность (a11y)

  • MUI Checkbox автоматически связывается с label через FormControlLabel.
  • Для собственного текста рекомендуется использовать aria-label или aria-labelledby.
  • Промежуточное состояние поддерживается экранными читалками через aria-checked="mixed".

Вывод

Checkbox в MUI — это гибкий, настраиваемый компонент, поддерживающий:

  • управляемые и неуправляемые состояния,
  • промежуточное состояние (indeterminate),
  • кастомные иконки и стили,
  • интеграцию с формами и группами элементов,
  • полную поддержку доступности.

Он является фундаментальной частью построения интерактивных интерфейсов с множественными вариантами выбора.

Оглавление