---
description: Компонент для группировки переключателей Radio с возможностью задания горизонтального или вертикального расположения.
tags: selection, forms
---

<Overview group="layout">

# RadioGroup [tag:component]

Компонент для группировки переключателей [`Radio`](/components/radio) с возможностью задания горизонтального или вертикального
расположения. Обеспечивает правильную семантику и доступность.

Связанные компоненты:

- [`Radio`](/components/radio)

</Overview>

{/* @example-description: Базовая группа `RadioGroup` с несколькими вариантами выбора и неактивной опцией. */}
<Playground>
  ```jsx
  <RadioGroup>
    <Radio name="fit" value="classic">
      Classic
    </Radio>
    <Radio name="fit" value="regular">
      Regular
    </Radio>
    <Radio name="fit" value="slim" disabled description="Нет в наличии">
      Slim
    </Radio>
  </RadioGroup>
  ```
</Playground>

## Доступность (a11y) [#a11y]

Компонент реализован с учётом требований доступности:

- использует атрибут `role="radiogroup"`;
- поддерживает управление с клавиатуры (стрелки влево/вправо/вверх/вниз для изменения значения);
- поддерживает все стандартные `aria`-атрибуты.

Для корректной работы скринридеров необходимо вручную передавать некоторые параметры:

- атрибуты `aria-labelledby`, `aria-label` и `aria-describedby` для предоставления дополнительной информации об элементе;
- атрибут `aria-required=true`, для того чтобы указать, что хотя бы один элемент `Radio` должен быть выбран.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `mode` | `"horizontal" \| "vertical"` | `vertical` | Режим расположения элементов. |