Radio
Радиокнопка для взаимоисключающего выбора из группы опций. Группировка — через общий name или через компонент ToggleGroup с selectionMode='single'.
Когда использовать
- Для выбора одной опции из 2–5 взаимоисключающих вариантов.
- Когда все варианты должны быть видны одновременно (иначе используйте
Select).
Когда не нужен Radio: для множественного выбора — Checkbox, для on/off — Switch.
Анатомия
Size
xs — для плотных списков опций, s — дефолт в формах.
Установка
pnpm add @cloud-ru/ds-togglesimport { Radio } from '@cloud-ru/ds-toggles'Примеры использования
1. Базовый Radio
tsx
import { Radio } from '@cloud-ru/ds-toggles';
export function RadioBasic() {
return <Radio defaultChecked />;
}2. Группа радиокнопок
tsx
import { Radio } from '@cloud-ru/ds-toggles';
export function RadioGroup() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<label htmlFor='delivery-courier'>
<Radio id='delivery-courier' name='delivery' value='courier' defaultChecked /> Курьер
</label>
<label htmlFor='delivery-pickup'>
<Radio id='delivery-pickup' name='delivery' value='pickup' /> Самовывоз
</label>
<label htmlFor='delivery-post'>
<Radio id='delivery-post' name='delivery' value='post' /> Почта
</label>
</div>
);
}3. Все состояния
tsx
import { Radio } from '@cloud-ru/ds-toggles';
export function RadioStates() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<Radio />
<Radio defaultChecked />
<Radio disabled />
<Radio disabled defaultChecked />
<Radio loading />
</div>
);
}Props
Types
Props
RadioProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
autofocus | boolean | — | no | HTML-аттрибут autofocus |
checked | boolean | — | no | HTML-аттрибут checked |
className | string | — | no | CSS-класс |
data-test-id | string | — | no | |
defaultChecked | boolean | — | no | HTML-аттрибут checked по-умолчанию |
disabled | boolean | false | no | HTML-аттрибут disabled |
id | string | — | no | HTML-аттрибут id |
inputRef | RefObject<HTMLInputElement> | — | no | |
loading | boolean | false | no | Состояние загрузки |
name | string | — | no | HTML-аттрибут name |
onBlur | FocusEventHandler<HTMLInputElement> | — | no | Колбек потери фокуса |
onChange | ((checked: boolean) => void) | — | no | Колбек смены значения |
onClick | MouseEventHandler<HTMLInputElement> | — | no | Колбек клика |
onFocus | FocusEventHandler<HTMLInputElement> | — | no | Колбек приобретения фокуса |
size | "s" | "xs" | s | no | Размер |
tabIndex | number | — | no | HTML-аттрибут tab-index |
value | string | — | no | HTML-аттрибут value |