Radio и RadioGroup

Radio и RadioGroup — это базовые компоненты для создания интерактивных радио-кнопок в приложениях на React с использованием Chakra UI. Они обеспечивают управление состоянием выбора и позволяют строить удобные формы с минимальными усилиями.

Компонент Radio

Radio представляет собой одиночную радио-кнопку. Основные свойства:

  • value — обязательное значение, которое используется при выборе данной кнопки.
  • isDisabled — делает кнопку недоступной для взаимодействия.
  • isChecked — управляемое состояние кнопки, позволяет вручную устанавливать выбранность.
  • defaultChecked — начальное состояние для неконтролируемого компонента.
  • size — размер кнопки: sm, md, lg.
  • colorScheme — цветовая схема для активного состояния (blue, red, green и другие).

Пример использования одиночной кнопки:

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

<Radio value="option1" colorScheme="blue">
  Опция 1
</Radio>

Важный момент: Radio без RadioGroup не управляет состоянием выбора других кнопок автоматически. Для полноценного радио-блока нужен RadioGroup.

Компонент RadioGroup

RadioGroup объединяет несколько радио-кнопок, позволяя управлять их состоянием как единым целым. Основные свойства:

  • value — текущее выбранное значение, для управляемого состояния.
  • defaultValue — начальное выбранное значение для неконтролируемого компонента.
  • onChange — функция, вызываемая при смене выбора, принимает новое значение.
  • size — общий размер всех кнопок в группе.
  • colorScheme — цветовая схема для всех кнопок группы.

Пример контролируемой группы:

import { Radio, RadioGroup, Stack } from "@chakra-ui/react";
import { useState } from "react";

function Example() {
  const [value, setValue] = useState("option1");

  return (
    <RadioGroup onCha nge={setValue} value={value}>
      <Stack direction="column">
        <Radio value="option1">Опция 1</Radio>
        <Radio value="option2">Опция 2</Radio>
        <Radio value="option3">Опция 3</Radio>
      </Stack>
    </RadioGroup>
  );
}

Здесь Stack используется для вертикального или горизонтального расположения кнопок с помощью свойства direction.

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

  • Управляемая группа использует value и onChange, полностью контролируя состояние выбора через состояние React.
  • Неконтролируемая группа использует defaultValue и позволяет Chakra UI управлять внутренним состоянием самостоятельно.

Пример неконтролируемой группы:

<RadioGroup defaultValue="option2">
  <Stack direction="row">
    <Radio value="option1">Опция 1</Radio>
    <Radio value="option2">Опция 2</Radio>
    <Radio value="option3">Опция 3</Radio>
  </Stack>
</RadioGroup>

Стилизация и размер

  • Размер кнопок: можно задать через size как для отдельных Radio, так и для RadioGroup.
  • Цветовая схема: colorScheme задаёт цвет активного состояния и чек-маркера.
  • Направление стека: Stack управляет расположением кнопок. direction="row" — горизонтально, direction="column" — вертикально.

Пример с кастомной схемой и размером:

<RadioGroup defaultValue="option1" colorScheme="red" size="lg">
  <Stack direction="row">
    <Radio value="option1">Красная 1</Radio>
    <Radio value="option2">Красная 2</Radio>
  </Stack>
</RadioGroup>

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

RadioGroup идеально интегрируется с формами, особенно с библиотеками вроде Formik или React Hook Form, через контролируемое состояние:

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

function FormExample() {
  const { control, handleSubmit } = useForm({
    defaultValues: { choice: "option2" },
  });

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

  return (
    <form onSub mit={handleSubmit(onSubmit)}>
      <Controller
        name="choice"
        control={control}
        render={({ field }) => (
          <RadioGroup {...field}>
            <Stack direction="column">
              <Radio value="option1">Опция 1</Radio>
              <Radio value="option2">Опция 2</Radio>
            </Stack>
          </RadioGroup>
        )}
      />
      <button type="submit">Отправить</button>
    </form>
  );
}

Такой подход гарантирует синхронизацию состояния формы и выбранной кнопки.

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

Chakra UI автоматически добавляет aria-атрибуты:

  • role="radiogroup" для RadioGroup.
  • aria-checked для Radio, отражающий выбранное состояние.
  • Поддержка клавиатурной навигации: стрелками вверх/вниз или влево/вправо можно менять выбранный элемент.

Это позволяет создавать формы, соответствующие стандартам WCAG без дополнительного кода.

Расширенные возможности

  • Комбинирование с иконками или кастомным контентом: внутри Radio можно размещать любые React-компоненты.
  • Интеграция с темизацией: через extendTheme можно задавать глобальные размеры и схемы цвета для всех Radio и RadioGroup.
  • Динамическое создание списка: радио-кнопки можно генерировать из массива данных с помощью map, сохраняя управляемое состояние.

Пример генерации списка:

const options = ["Опция 1", "Опция 2", "Опция 3"];

<RadioGroup defaultValue="Опция 1">
  <Stack direction="column">
    {options.map(opt => (
      <Radio key={opt} value={opt}>{opt}</Radio>
    ))}
  </Stack>
</RadioGroup>

Эти возможности делают Radio и RadioGroup в Chakra UI универсальным инструментом для создания интерактивных, стилизованных и доступных форм с минимальными усилиями.

Оглавление