Indeterminate состояние чекбоксов

В библиотеке MUI (Material-UI) чекбоксы (Checkbox) поддерживают не только два стандартных состояния — отмечено (checked) и не отмечено (unchecked), но и промежуточное состояние — indeterminate. Это состояние особенно полезно для случаев, когда нужно показать, что выбор частично выполнен, например, при выборе всех элементов в группе, когда часть из них выбрана, а часть нет.

Подключение и базовая настройка

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

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

Создание базового чекбокса с поддержкой indeterminate:

<Checkbox
  checked={isChecked}
  indeterminate={isIndeterminate}
  onCha nge={handleChange}
/>
  • checked — булевое значение, определяющее, отмечен ли чекбокс.
  • indeterminate — булевое значение, определяющее промежуточное состояние.
  • onChange — функция, обрабатывающая изменение состояния.

Управление состояниями

Indeterminate состояние не является самостоятельным состоянием чекбокса: оно всегда отображается только визуально, но логически значение чекбокса остаётся либо true, либо false. Поэтому важно правильно синхронизировать его с основным состоянием.

Пример управления состоянием группы чекбоксов:

import React, { useState } from 'react';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

function TodoList() {
  const [checkedItems, setCheckedItems] = useState([false, false, false]);

  const allChecked = checkedItems.every(Boolean);
  const someChecked = checkedItems.some(Boolean) && !allChecked;

  const handleMasterChange = (event) => {
    const newChecked = Array(checkedItems.length).fill(event.target.checked);
    setCheckedItems(newChecked);
  };

  const handleItemChange = (index) => (event) => {
    const newCheckedItems = [...checkedItems];
    newCheckedItems[index] = event.target.checked;
    setCheckedItems(newCheckedItems);
  };

  return (
    <div>
      <FormControlLabel
        label="Выбрать все"
        control={
          <Checkbox
            checked={allChecked}
            indeterminate={someChecked}
            onCha nge={handleMasterChange}
          />
        }
      />
      {checkedItems.map((item, index) => (
        <FormControlLabel
          key={index}
          label={`Элемент ${index + 1}`}
          control={
            <Checkbox
              checked={item}
              onCha nge={handleItemChange(index)}
            />
          }
        />
      ))}
    </div>
  );
}

В этом примере:

  • allChecked определяет, должны ли все чекбоксы быть отмечены.
  • someChecked активирует indeterminate состояние главного чекбокса.
  • Изменение любого из отдельных чекбоксов обновляет состояние группы.

Важные моменты использования

  1. Indeterminate состояние не влияет на checked Визуально чекбокс может отображаться как частично выбранный, но при отправке формы его значение будет либо true, либо false.

  2. Работа с контролируемыми компонентами Для корректного отображения indeterminate состояния рекомендуется использовать контролируемые компоненты, где значение checked и indeterminate задаются через состояние React.

  3. Стилизация indeterminate состояния MUI автоматически отображает горизонтальную линию в центре чекбокса. Для кастомизации можно использовать CSS через свойство sx или classes:

<Checkbox
  indeterminate
  sx={{
    color: 'blue',
    '&.MuiCheckbox-indeterminate': {
      color: 'orange',
    },
  }}
/>
  1. Аксессибилити (ARIA) Для правильного взаимодействия с вспомогательными технологиями важно учитывать, что indeterminate состояние должно быть отражено через атрибут aria-checked="mixed". MUI делает это автоматически при установке свойства indeterminate={true}.

Практическое применение

Indeterminate состояние часто используется в следующих сценариях:

  • Выбор всех элементов списка с возможностью частичного выбора Как показано в примере выше, главный чекбокс может отображать частичный выбор группы элементов.

  • Деревья и вложенные списки В деревьях или меню с вложенными категориями чекбокс родителя может быть indeterminate, если выбраны только некоторые дочерние элементы.

  • Формы с множественным выбором Удобно показывать промежуточное состояние, если пользователь частично заполнил несколько связанных опций.

Итоговые рекомендации по использованию

  • Всегда использовать контролируемый компонент, чтобы синхронизировать checked и indeterminate.
  • Indeterminate — только визуальное состояние, поэтому логика обработки должна базироваться на массиве значений или другой структуре данных.
  • При работе с группами и деревьями удобно вычислять indeterminate через методы some() и every() для массива состояния элементов.
  • Для кастомной стилизации можно использовать sx или classes, включая выделение цвета или изменение иконки.

Эта функциональность позволяет создавать интуитивно понятные интерфейсы с поддержкой частичного выбора, что значительно улучшает UX в сложных формах и списках.

Оглавление