Radio и Radio Group

Компоненты Radio и Radio.Group в библиотеке Ant Design предоставляют удобные средства для создания переключателей и выбора одного варианта из набора. Они широко применяются в формах, фильтрах и интерфейсах с ограниченным выбором.

Radio

Radio — это базовый компонент одиночного переключателя. Его ключевые свойства:

  • checked — управляет состоянием выбора (boolean). Если true, радио выбран.
  • onChange — функция обратного вызова при изменении состояния выбора. Получает объект события e, содержащий e.target.value и e.target.checked.
  • value — значение радио, используемое внутри Radio.Group для идентификации выбранного элемента.
  • disabled — блокирует взаимодействие с элементом.

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

import { Radio } from 'antd';
import { useState } from 'react';

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

  return (
    <Radio
      checked={checked}
      onCha nge={e => setChecked(e.target.checked)}
    >
      Выбрать опцию
    </Radio>
  );
};

Здесь состояние checked контролирует, отмечен ли элемент. Функция onChange обновляет состояние при взаимодействии пользователя.

Radio.Group

Radio.Group объединяет несколько радио-кнопок, позволяя выбрать только одну опцию из группы. Основные свойства:

  • value — текущее выбранное значение.
  • onChange — функция, вызываемая при изменении выбора. Получает объект события e, содержащий e.target.value.
  • options — массив опций для автоматического рендера радио-кнопок. Каждая опция может быть строкой или объектом с полями label и value.
  • disabled — блокирует все элементы внутри группы.

Пример использования Radio.Group с управляемым состоянием:

import { Radio } from 'antd';
import { useState } from 'react';

const RadioGroupExample = () => {
  const [value, setValue] = useState('option1');

  const onCha nge = e => {
    setValue(e.target.value);
  };

  return (
    <Radio.Group onCha nge={onChange} value={value}>
      <Radio value="option1">Опция 1</Radio>
      <Radio value="option2">Опция 2</Radio>
      <Radio value="option3">Опция 3</Radio>
    </Radio.Group>
  );
};

В этом примере Radio.Group управляет состоянием выбора, гарантируя, что только один элемент может быть выбран одновременно.

Использование options в Radio.Group

Radio.Group поддерживает упрощённую конфигурацию через массив options, что позволяет сократить код при больших списках:

const options = [
  { label: 'Опция A', value: 'A' },
  { label: 'Опция B', value: 'B' },
  { label: 'Опция C', value: 'C' },
];

<Radio.Group
  options={options}
  onCha nge={e => console.log(e.target.value)}
  value="B"
/>

При этом каждая опция автоматически превращается в Radio с соответствующим значением и текстом.

Radio.Button и Radio.Group

Для создания более интерактивных элементов можно использовать Radio.Button внутри Radio.Group. В отличие от стандартного радио, Radio.Button визуально выглядит как кнопка, что особенно удобно для выбора между несколькими вариантами:

import { Radio } from 'antd';

<Radio.Group defaultValue="1">
  <Radio.Button value="1">Первый</Radio.Button>
  <Radio.Button value="2">Второй</Radio.Button>
  <Radio.Button value="3">Третий</Radio.Button>
</Radio.Group>

Radio.Button сохраняет логику выбора одного элемента, но улучшает визуальную наглядность, особенно при использовании горизонтальных панелей или фильтров.

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

  • Управляемые: состояние выбора полностью контролируется через value и onChange. Позволяет синхронизировать данные с внешними формами или состоянием приложения.
  • Неуправляемые: можно использовать defaultValue для начального значения без привязки к состоянию. Выбор пользователя хранится внутри компонента.

Пример неуправляемой группы:

<Radio.Group defaultValue="2">
  <Radio value="1">Один</Radio>
  <Radio value="2">Два</Radio>
  <Radio value="3">Три</Radio>
</Radio.Group>

Дополнительные свойства и стилизация

  • size — позволяет задать размеры Radio и Radio.Button (small, middle, large).
  • className / style — поддержка кастомных CSS для тонкой стилизации.
  • buttonStyle — для Radio.Button можно задать outline или solid стиль кнопки.

Пример кастомного стиля:

<Radio.Group
  value={value}
  onCha nge={onChange}
  buttonStyle="solid"
  style={{ marginTop: 16 }}
>
  <Radio.Button value="1">Первый</Radio.Button>
  <Radio.Button value="2">Второй</Radio.Button>
</Radio.Group>

События

  • onChange — основной способ обработки выбора. Передаёт объект события с e.target.value.
  • onMouseEnter / onMouseLeave — можно использовать для расширенной интерактивности.
  • onClick — срабатывает на клике по конкретному Radio, полезно для логики, не связанной напрямую с выбором значения.

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

  • Для длинных списков предпочтительно использовать options вместо ручного добавления <Radio> для каждого элемента.
  • Если необходимо объединить визуальную привлекательность и ограниченный выбор, стоит использовать Radio.Button.
  • Для интеграции с формами Ant Design (Form.Item) компоненты Radio поддерживают валидацию и привязку к состоянию формы напрямую через name и rules.

Эти возможности делают Radio и Radio.Group гибкими инструментами для управления выбором одного элемента, обеспечивая чистый и управляемый код, лёгкую стилизацию и интеграцию с формами и пользовательскими интерфейсами.

Оглавление