UIKit
7.11.0
• RadioКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
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> |