RadioGroup

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 у радиогруппы.booleanfalse
optionsВарианты для радиогруппы.RadioGroupOption[]
optionClassNameHTML-атрибут class для дочерних элементов радиогруппы.string
directionОпределяет направление расположения радиогруппы.horizontal - vertical"horizontal"
defaultValueЗадает начальное значение состояния компонента при его монтировании.string
onUpdateСрабатывает при изменении состояния радио пользователем и передает новое значение как аргумент обратного вызова.(value: string) => void
onChangeСрабатывает при изменении состояния радио пользователем и передает событие изменения как аргумент обратного вызова.Function
sizeОпределяет размер радиогруппы.m lm
qaHTML-атрибут data-qa, используется для тестирования.string
styleHTML-атрибут style.React.CSSProperties
classNameHTML-атрибут 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 у радио.booleanfalse
valueЗначение контрола.string