Radio и RadioGroup

Компонент Radio в библиотеке MUI используется для выбора одного варианта из нескольких. Он является визуальным представлением радиокнопки и тесно интегрируется с RadioGroup для группового управления состоянием.

Основные свойства Radio

  • checked: логическое значение, определяющее, выбрана ли радиокнопка.
  • onChange: функция, вызываемая при изменении состояния радиокнопки. Принимает объект события, который содержит текущее значение.
  • value: значение радиокнопки, передаваемое при выборе. Используется для идентификации выбранного варианта в RadioGroup.
  • disabled: если установлено в true, радиокнопка становится недоступной для взаимодействия.
  • color: цвет радиокнопки. Поддерживаются стандартные значения MUI (primary, secondary, default, error, info, success, warning).

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

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

}
  label="Вариант 1"
/>
}
  label="Вариант 2"
/>

FormControlLabel используется для объединения радиокнопки и её подписи. Это улучшает доступность и удобство работы с формами.

Группировка радиокнопок: RadioGroup

RadioGroup управляет набором радиокнопок как единым контролом. Он позволяет задать общее значение и обработчик изменений, а также гарантирует, что только одна радиокнопка может быть выбрана в группе.

Основные свойства RadioGroup

  • value: текущее выбранное значение. Связывает состояние группы с выбранной радиокнопкой.
  • onChange: функция, вызываемая при выборе другого варианта. Аргумент функции — событие изменения, из которого можно получить новое значение.
  • row: если установлено в true, радиокнопки располагаются горизонтально; по умолчанию — вертикально.
  • name: имя группы, используемое для идентификации радиокнопок в форме.

Пример горизонтальной группы:

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

 setSelectedOption(e.target.value)}
  name="options"
>
  } label="Вариант 1" />
  } label="Вариант 2" />
  } label="Вариант 3" />

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

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

  1. Контролируемый компонент – значение хранится в состоянии React и передается через value:
const [selectedOption, setSelectedOption] = useState('option1');

 setSelectedOption(e.target.value)}
>
  ...
  1. Неконтролируемый компонент – состояние управляется DOM через defaultValue:

  ...

Стилизация

Стилизация радиокнопок и групп осуществляется через свойства sx и тему MUI.

  • Изменение цвета и размера радиокнопки:
  • Настройка отступов между радиокнопками в группе:

  ...

Доступность

  • Радиокнопки должны иметь подписи (label) для корректной работы скринридеров.
  • Использование FormControl и FormLabel позволяет объединять радиокнопки в логически осмысленные группы:
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';


  Выберите вариант
   setSelectedOption(e.target.value)}>
    } label="Вариант 1" />
    } label="Вариант 2" />

Использование FormControl и FormLabel улучшает доступность, управляемость и визуальную консистентность формы.

Комбинирование с другими компонентами

Radio и RadioGroup можно комбинировать с Grid, Stack и Paper для построения сложных форм и интерфейсов. Например, Stack помогает создавать аккуратные вертикальные или горизонтальные макеты с контролем отступов:

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


  
    Выберите план
     setSelectedPlan(e.target.value)}>
      } label="Базовый" />
      } label="Профессиональный" />
      } label="Корпоративный" />

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

Оглавление