Radio

size
content
checked
disabled
import {Radio} from '@gravity-ui/uikit';

Компонент Radio позволяет пользователям выбрать один вариант из списка.

Состояния

Radio поддерживает следующие состояния:

  • Checked — радио выбрано.
  • Disabled — радио недоступно для выбора.
<Radio value="option 1" content="Unchecked" size="l" checked={false}/>
<Radio value="option 2" content="Checked" size="l" checked/>
<Radio value="option 3" content="Disabled" size="l" disabled/>

Размер

Размер Radio можно настроить с помощью свойства size. Размер по умолчанию — m.

<Radio value="option 1" content="M Size" size="m"/>
<Radio value="option 2" content="L Size" size="l"/>
<Radio value="option 3" content="XL Size" size="xl"/>

Лейбл

Лейбл для Radio можно задать через свойство content или передать его как дочерний элемент.

<div>
  <Radio content="Content" size="l" />
  <div
    style={{
      marginTop: 10,
    }}
  >
    <Radio size="l">
      <span>Content as children</span>
    </Radio>
  </div>
</div>

Свойства

ИмяОписаниеТипЗначение по умолчанию
childrenСодержимое радио (как правило, лейбл).ReactNode
contentСодержимое радио (альтернатива children).ReactNode
disabledВключает или отключает состояние disabled у радио.booleanfalse
checkedВключает или отключает состояние checked у радио.booleanfalse
defaultCheckedЗадает начальное состояние checked при монтировании компонента.booleanfalse
onUpdateСрабатывает при изменении состояния радио пользователем и передает значение checked как аргумент обратного вызова.(checked: boolean) => void
onChangeСрабатывает при изменении состояния радио пользователем и передает событие изменения как аргумент обратного вызова.Function
onFocusОбработчик события, вызываемый, когда элемент ввода радио получает фокус.Function
onBlurОбработчик события, вызываемый, когда элемент ввода радио теряет фокус.Function
sizeОпределяет размер радио.m lm
idHTML-атрибут id.string
qaHTML-атрибут data-qa, используется для тестирования.string
styleHTML-атрибут style.React.CSSProperties
classNameHTML-атрибут class.string
titleHTML-атрибут title.string
nameHTML-атрибут name для элемента ввода.string
valueЗначение контрола.string
indeterminateВключает или отключает состояние неопределенности радио.booleanfalse
controlPropsДополнительные свойства базового элемента ввода.React.InputHTMLAttributes<HTMLInputElement>
controlRefСсылка на базовый элемент ввода.React.Ref<HTMLInputElement>