Gravity UI – UIKit

import {Radio} from '@gravity-ui/uikit';

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

Состояния

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

Checked — радио выбрано.
Disabled — радио недоступно для выбора.

UncheckedCheckedDisabled

import {Radio} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <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 />
        </>
    );
}

import {Radio} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <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.

M SizeL SizeXL Size

import {Radio} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <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" />
        </>
    );
}

import {Radio} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <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 или передать его как дочерний элемент.

Content

Content as children

import {Box, Radio} from '@gravity-ui/uikit';


export default function () {
    return (
        <div>
            <Radio content="Content" size="l" />
            <Box spacing={{mt: 2}}>
                <Radio size="l">
                    <span>Content as children</span>
                </Radio>
            </Box>
        </div>
    );
}

import {Box, Radio} from '@gravity-ui/uikit';

export default function () {
    return (
        <div>
            <Radio content="Content" size="l" />
            <Box spacing={{mt: 2}}>
                <Radio size="l">
                    <span>Content as children</span>
                </Radio>
            </Box>
        </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>`

Radio

§Состояния

§Размер

§Лейбл

§Свойства

Состояния

Размер

Лейбл

Свойства