Radio
Maintainer:
zamkovskaya
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 у радио. | boolean | false |
| checked | Включает или отключает состояние checked у радио. | boolean | false |
| defaultChecked | Задает начальное состояние checked при монтировании компонента. | boolean | false |
| onUpdate | Срабатывает при изменении состояния радио пользователем и передает значение checked как аргумент обратного вызова. | (checked: boolean) => void | |
| onChange | Срабатывает при изменении состояния радио пользователем и передает событие изменения как аргумент обратного вызова. | Function | |
| onFocus | Обработчик события, вызываемый, когда элемент ввода радио получает фокус. | Function | |
| onBlur | Обработчик события, вызываемый, когда элемент ввода радио теряет фокус. | Function | |
| size | Определяет размер радио. | m l | m |
| id | HTML-атрибут id. | string | |
| qa | HTML-атрибут data-qa, используется для тестирования. | string | |
| style | HTML-атрибут style. | React.CSSProperties | |
| className | HTML-атрибут class. | string | |
| title | HTML-атрибут title. | string | |
| name | HTML-атрибут name для элемента ввода. | string | |
| value | Значение контрола. | string | |
| indeterminate | Включает или отключает состояние неопределенности радио. | boolean | false |
| controlProps | Дополнительные свойства базового элемента ввода. | React.InputHTMLAttributes<HTMLInputElement> | |
| controlRef | Ссылка на базовый элемент ввода. | React.Ref<HTMLInputElement> |