RadioGroup
Maintainer:
zamkovskaya
size
direction
disabled
import {RadioGroup} from '@gravity-ui/uikit';
Компонент RadioGroup (радиогруппа) используется для создания группы, где пользователи могут выбрать только один вариант из нескольких предложенных.
Отключенное состояние
const options: RadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group2" defaultValue={options[0].value} options={options} disabled/>Размер
Размер RadioGroup можно настроить с помощью свойства size. Размер по умолчанию — m.
const options: RadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value} options={options} size="m"/>
<RadioGroup name="group2" defaultValue={options[0].value} options={options} size="l"/>Направление
Направление расположения RadioGroup можно настроить с помощью свойства direction. Направление по умолчанию — horizontal.
const options: RadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value} options={options} direction="horizontal"/>
<RadioGroup name="group2" defaultValue={options[0].value} options={options} direction="vertical"/>Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| children | Содержимое радиогруппы. | ReactNode | |
| disabled | Включает или отключает состояние disabled у радиогруппы. | boolean | false |
| options | Варианты для радиогруппы. | RadioGroupOption[] | |
| optionClassName | HTML-атрибут class для дочерних элементов радиогруппы. | string | |
| direction | Определяет направление расположения радиогруппы. | horizontal - vertical | "horizontal" |
| defaultValue | Задает начальное значение состояния компонента при его монтировании. | string | |
| onUpdate | Срабатывает при изменении состояния радио пользователем и передает новое значение как аргумент обратного вызова. | (value: string) => void | |
| onChange | Срабатывает при изменении состояния радио пользователем и передает событие изменения как аргумент обратного вызова. | Function | |
| size | Определяет размер радиогруппы. | m l | m |
| qa | HTML-атрибут data-qa, используется для тестирования. | string | |
| style | HTML-атрибут style. | React.CSSProperties | |
| className | HTML-атрибут class. | string |
RadioGroup.Option
RadioGroup также имеет вложенный компонент Option, который является эквивалентом Radio и может быть использован для создания вариантов радио в рамках RadioGroup.
const options: RadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value}>
<RadioGroup.Option content={options[0].content} value={options[0].value} />
<RadioGroup.Option content={options[1].content} value={options[1].value} />
<RadioGroup.Option content={options[2].content} value={options[2].value} />
</RadioGroup>Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| children | Содержимое радио (как правило, лейбл). | ReactNode | |
| content | Содержимое радио (альтернатива children). | ReactNode | |
| disabled | Включает или отключает состояние disabled у радио. | boolean | false |
| value | Значение контрола. | string |