Checkbox

Компонент Checkbox в Chakra UI предназначен для создания интерактивных флажков в интерфейсе. Он полностью управляемый, поддерживает стилизацию через систему тем и предоставляет удобный API для интеграции с формами. Основной импорт выглядит следующим образом:

import { Checkbox } from "@chakra-ui/react";

Базовый пример использования:

<Checkbox>Принять условия</Checkbox>

По умолчанию Checkbox создаёт управляемый элемент формы с состояниями checked и unchecked. Можно использовать свойство isDisabled для блокировки выбора:

<Checkbox isDisabled>Невозможно выбрать</Checkbox>

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

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

import { useState } from "react";
import { Checkbox } from "@chakra-ui/react";

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

  return (
    <Checkbox isChecked={checked} onCha nge={(e) => setChecked(e.target.checked)}>
      Подписка на новости
    </Checkbox>
  );
}

Для неуправляемого варианта используется свойство defaultChecked:

<Checkbox defaultChecked>Автообновление включено</Checkbox>

Ключевой момент: isChecked делает компонент управляемым, а defaultChecked — задаёт начальное состояние без последующего контроля.

Стилизация Checkbox

Chakra UI позволяет изменять внешний вид через свойства компонента и систему темы:

<Checkbox colorScheme="green" size="lg">
  Согласен с политикой
</Checkbox>
  • colorScheme определяет цвет флажка при выборе (blue, red, green, teal и другие).
  • size задаёт размер: sm, md, lg.

Для кастомизации через CSS используется sx или chakra:

<Checkbox
  sx={{
    borderRadius: "md",
    borderColor: "purple.500",
    _checked: {
      bg: "purple.500",
      borderColor: "purple.500",
    },
  }}
>
  Кастомный чекбокс
</Checkbox>

Группы Checkbox

Компонент CheckboxGroup позволяет объединять несколько чекбоксов с единым управлением состоянием:

import { Checkbox, CheckboxGroup, Stack } from "@chakra-ui/react";

<CheckboxGroup colorScheme="blue" defaultValue={['react']}>
  <Stack spacing={4} direction="column">
    <Checkbox value="react">React</Checkbox>
    <Checkbox value="vue">Vue</Checkbox>
    <Checkbox value="angular">Angular</Checkbox>
  </Stack>
</CheckboxGroup>

Особенности CheckboxGroup:

  • defaultValue задаёт изначально выбранные значения.
  • onChange возвращает массив выбранных значений.
  • Вложенные чекбоксы наследуют свойства colorScheme и size от группы.

Пример с обработкой событий:

<CheckboxGroup
  colorScheme="teal"
  value={selectedValues}
  onCha nge={setSelectedValues}
>
  <Stack>
    <Checkbox value="html">HTML</Checkbox>
    <Checkbox value="css">CSS</Checkbox>
    <Checkbox value="js">JavaScript</Checkbox>
  </Stack>
</CheckboxGroup>

Индикатор частичного выбора (Indeterminate)

Для сценариев с частичным выбором (например, “выбрать все”) используется свойство isIndeterminate:

<Checkbox isIndeterminate>Выбрать все файлы</Checkbox>

Применение в группе:

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

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

  return (
    <>
      <Checkbox
        isChecked={allChecked}
        isIndeterminate={isIndeterminate}
        onCha nge={(e) =>
          setCheckedItems([e.target.checked, e.target.checked, e.target.checked])
        }
      >
        Выбрать все
      </Checkbox>
      <Stack pl={6} mt={1}>
        <Checkbox
          isChecked={checkedItems[0]}
          onCha nge={(e) =>
            setCheckedItems([e.target.checked, checkedItems[1], checkedItems[2]])
          }
        >
          Файл 1
        </Checkbox>
        <Checkbox
          isChecked={checkedItems[1]}
          onCha nge={(e) =>
            setCheckedItems([checkedItems[0], e.target.checked, checkedItems[2]])
          }
        >
          Файл 2
        </Checkbox>
        <Checkbox
          isChecked={checkedItems[2]}
          onCha nge={(e) =>
            setCheckedItems([checkedItems[0], checkedItems[1], e.target.checked])
          }
        >
          Файл 3
        </Checkbox>
      </Stack>
    </>
  );
}

Контроль доступности и состояния

  • isDisabled — делает чекбокс недоступным.
  • isReadOnly — запрещает изменение, но оставляет возможность фокусировки.
  • isInvalid — визуально подчёркивает ошибочное состояние.

Пример:

<Checkbox isDisabled>Невозможно выбрать</Checkbox>
<Checkbox isReadOnly>Только для чтения</Checkbox>
<Checkbox isInvalid>Ошибка выбора</Checkbox>

Интеграция с формами

Chakra UI совместим с React Hook Form или другими библиотеками форм. Пример с React Hook Form:

import { useForm, Controller } from "react-hook-form";
import { Checkbox } from "@chakra-ui/react";

function FormExample() {
  const { control, handleSubmit } = useForm({
    defaultValues: { agree: false },
  });

  const onSub mit = (data) => console.log(data);

  return (
    <form onSub mit={handleSubmit(onSubmit)}>
      <Controller
        name="agree"
        control={control}
        render={({ field }) => <Checkbox {...field}>Согласие</Checkbox>}
      />
      <button type="submit">Отправить</button>
    </form>
  );
}

Преимущество: полная синхронизация состояния чекбокса с формой без дополнительного кода для управления состоянием.

Анимации и визуальные эффекты

Chakra UI автоматически добавляет плавные анимации для состояний checked, hover и focus. Для более тонкой настройки можно использовать псевдоклассы:

<Checkbox
  _hover={{ bg: "gray.100" }}
  _focus={{ boxShadow: "outline" }}
  _checked={{ bg: "blue.500", color: "white" }}
>
  Анимация и ховер
</Checkbox>

Резюме ключевых свойств

Свойство Описание
isChecked Управляемое состояние выбранности
defaultChecked Начальное состояние для неуправляемого компонента
isDisabled Отключает взаимодействие
isReadOnly Только чтение, нельзя изменить
isInvalid Отображение состояния ошибки
isIndeterminate Частично выбранное состояние
colorScheme Цветовая схема для чекбокса
size Размер: sm, md, lg
onChange Обработчик изменения состояния

Chакра UI делает Checkbox гибким, стилизуемым и легко интегрируемым в сложные формы и интерфейсы, позволяя создавать как простые флажки, так и группы с управлением и частичными выборами.

Оглавление