Gravity UI – UIKit – SegmentedRadioGroup

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

The SegmentedRadioGroup component is used to create a group of radio buttons where users can select a single option from multiple choices.

Disabled state

Value 1Value 2Value 3

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


export default function () {
    return (
        <SegmentedRadioGroup name="group1" defaultValue="Value 1" disabled>
            <SegmentedRadioGroup.Option value="Value 1">Value 1</SegmentedRadioGroup.Option>
            <SegmentedRadioGroup.Option value="Value 2">Value 2</SegmentedRadioGroup.Option>
            <SegmentedRadioGroup.Option value="Value 3">Value 3</SegmentedRadioGroup.Option>
        </SegmentedRadioGroup>
    );
}

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

export default function () {
    return (
        <SegmentedRadioGroup name="group1" defaultValue="Value 1" disabled>
            <SegmentedRadioGroup.Option value="Value 1">Value 1</SegmentedRadioGroup.Option>
            <SegmentedRadioGroup.Option value="Value 2">Value 2</SegmentedRadioGroup.Option>
            <SegmentedRadioGroup.Option value="Value 3">Value 3</SegmentedRadioGroup.Option>
        </SegmentedRadioGroup>
    );
}

Size

Use the size property to manage the SegmentedRadioGroup size. The default size is m.

Width

Use the width property to manage the SegmentedRadioGroup width:

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


export default function () {
    return (
        <Box width={140} style={{border: '2px dashed gray'}}>
            <Flex direction="column" gap={2}>
                <SegmentedRadioGroup>
                    <SegmentedRadioGroup.Option value="1" content="none" />
                    <SegmentedRadioGroup.Option value="2" content="none********" />
                </SegmentedRadioGroup>
                <SegmentedRadioGroup width="auto">
                    <SegmentedRadioGroup.Option value="1" content="auto" />
                    <SegmentedRadioGroup.Option value="2" content="auto********" />
                </SegmentedRadioGroup>
                <SegmentedRadioGroup width="max">
                    <SegmentedRadioGroup.Option value="1" content="max" />
                    <SegmentedRadioGroup.Option value="2" content="max" />
                </SegmentedRadioGroup>
            </Flex>
        </Box>
    );
}

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

export default function () {
    return (
        <Box width={140} style={{border: '2px dashed gray'}}>
            <Flex direction="column" gap={2}>
                <SegmentedRadioGroup>
                    <SegmentedRadioGroup.Option value="1" content="none" />
                    <SegmentedRadioGroup.Option value="2" content="none********" />
                </SegmentedRadioGroup>
                <SegmentedRadioGroup width="auto">
                    <SegmentedRadioGroup.Option value="1" content="auto" />
                    <SegmentedRadioGroup.Option value="2" content="auto********" />
                </SegmentedRadioGroup>
                <SegmentedRadioGroup width="max">
                    <SegmentedRadioGroup.Option value="1" content="max" />
                    <SegmentedRadioGroup.Option value="2" content="max" />
                </SegmentedRadioGroup>
            </Flex>
        </Box>
    );
}

Properties

Name	Description	Type	Default
children	Content of the radio button.	`ReactNode`
disabled	Toggles the `disabled` state of the radio button.	`boolean`	`false`
options	Options for radio button.	`SegmentedRadioGroupOptionProps[]`
defaultValue	Sets the initial value state when the component is mounted.	`string`
onUpdate	Fires when the user changes the radio button state and provides the new value as a callback argument.	`(value: string) => void`
onChange	Fires when the user changes the radio button state 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`
width	Sets the width of the radio button.	`auto - max`
size	Sets the size of the radio button.	`s` `m` `l` `xl`	`m`
name	`name` HTML attribute for the input element.	`string`
qa	`data-qa` HTML attribute, used for testing	`string`
style	`style` HTML attribute	`React.CSSProperties`
className	`class` HTML attribute	`string`

SegmentedRadioGroup.Option

The SegmentedRadioGroup component also exports a nested Option component. You can use it to create radio button options within a SegmentedRadioGroup.

Value 1Value 2Value 3

import type {SegmentedRadioGroupOptionProps} from '@gravity-ui/uikit';
import {SegmentedRadioGroup} from '@gravity-ui/uikit';


const options: SegmentedRadioGroupOptionProps[] = [
    {value: 'Value 1', content: 'Value 1'},
    {value: 'Value 2', content: 'Value 2'},
    {value: 'Value 3', content: 'Value 3'},
];


export default function () {
    return (
        <SegmentedRadioGroup name="group1" defaultValue={options[0].value}>
            <SegmentedRadioGroup.Option content={options[0].content} value={options[0].value} />
            <SegmentedRadioGroup.Option content={options[1].content} value={options[1].value} />
            <SegmentedRadioGroup.Option content={options[2].content} value={options[2].value} />
        </SegmentedRadioGroup>
    );
}

import type {SegmentedRadioGroupOptionProps} from '@gravity-ui/uikit';
import {SegmentedRadioGroup} from '@gravity-ui/uikit';

const options: SegmentedRadioGroupOptionProps[] = [
    {value: 'Value 1', content: 'Value 1'},
    {value: 'Value 2', content: 'Value 2'},
    {value: 'Value 3', content: 'Value 3'},
];

export default function () {
    return (
        <SegmentedRadioGroup name="group1" defaultValue={options[0].value}>
            <SegmentedRadioGroup.Option content={options[0].content} value={options[0].value} />
            <SegmentedRadioGroup.Option content={options[1].content} value={options[1].value} />
            <SegmentedRadioGroup.Option content={options[2].content} value={options[2].value} />
        </SegmentedRadioGroup>
    );
}

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`
value	Control value	`string`

SegmentedRadioGroup

§Disabled state

§Size

§Width

§Properties

§SegmentedRadioGroup.Option

§Properties

Disabled state

Size

Width

Properties

SegmentedRadioGroup.Option

Properties