Gravity UI – UIKit

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

The Radio component allows the users to select a single option from a list of choices.

States

Radio can have the following states:

Checked: Radio is selected.
Disabled: Radio is unavailable for selection.

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 />
        </>
    );
}

Size

To manage the Radio size, use the size property. The default size is m.

M SizeL 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" />
        </>
    );
}

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" />
        </>
    );
}

Label

You can assign a label to a Radio using the content property or provide it as a child property.

Content

Content as children

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


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

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

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

Properties

Name	Description	Type	Default
children	The content of the radio (usually, a label).	`ReactNode`
content	The content of the radio (alternative to children).	`ReactNode`
disabled	Toggles the `disabled` state of the radio.	`boolean`	`false`
checked	Toggles the `checked` state of the radio.	`boolean`	`false`
defaultChecked	Sets the initial checked state when the component is mounted	`boolean`	`false`
onUpdate	Fires when the radio state is changed by the user and provides the checked value as a callback argument.	`(checked: boolean) => void`
onChange	Fires when the radio state is changed by the user and provides the change event as a callback argument.	`Function`
onFocus	Event handler to use when the radio input element receives focus.	`Function`
onBlur	Event handler to use when the radio input element loses focus.	`Function`
size	Sets the size of the radio.	`m` `l`	`m`
id	`id` HTML attribute	`string`
qa	`data-qa` HTML attribute, used for testing.	`string`
style	`style` HTML attribute	`React.CSSProperties`
className	`class` HTML attribute	`string`
title	`title` HTML attribute	`string`
name	`name` HTML attribute for the input element	`string`
value	Control value	`string`
indeterminate	Toggles the indeterminate state of the radio.	`boolean`	`false`
controlProps	Additional propeties for the underlying input element	`React.InputHTMLAttributes<HTMLInputElement>`
controlRef	Ref to the underlying input element	`React.Ref<HTMLInputElement>`

Radio

§States

§Size

§Label

§Properties

States

Size

Label

Properties