Radio

Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.

Для использования неконтролируемого режима достаточно просто не передавать checked или передавать defaultChecked, если требуется задать значение по умолчанию. Для контролируемого режима используйте связку свойств checked/onChange для задания значения и его изменения.

// Неконтролируемое состояние, по умолчанию в состоянии "выбран"
<Radio name="pay" value="card" defaultChecked>
  Оплата картой
</Radio>;
 
// Контролируемое состояние, значение "не выбран"
const [checked, setChecked] = React.useState(false);
 
<Radio name="pay" value="card" checked={checked} onChange={(event) => setChecked(true)}>
  Оплата картой
</Radio>;

Состояния

disabled

Свойство disabled блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

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

• используйте от двух до пяти компонентов Radio, объединенных в группу (при большем количестве опций рассмотрите возможность использования компонента Select);
• если вам необходим компонент с индикацией отмечен/не отмечен, то используйте Checkbox или Switch;
• для выбора нескольких значений из списка используйте Checkbox.

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

Компонент Radio обеспечивает базовую доступность, используя нативные HTML-элементы input[type="radio"] и label.

Для улучшения доступности рекомендуется:

• группировать связанные Radio с помощью компонента RadioGroup (или любую другую обёртку с role="radiogroup");
• использовать свойство description для предоставления дополнительной информации;
• при необходимости добавлять aria-label или aria-labelledby для более подробного описания.

Свойства и методы