SegmentedRadioGroup
Maintainer:
zamkovskaya
size
width
disabled
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
<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.
const options = [
<SegmentedRadioGroup.Option key="Value 1" value="Value 1">Value 1</SegmentedRadioGroup.Option>,
<SegmentedRadioGroup.Option key="Value 2" value="Value 2">Value 2</SegmentedRadioGroup.Option>,
<SegmentedRadioGroup.Option key="Value 3" value="Value 3">Value 3</SegmentedRadioGroup.Option>,
];
<SegmentedRadioGroup name="group1" defaultValue="Value 1" size="s">{options}</SegmentedRadioGroup>
<SegmentedRadioGroup name="group2" defaultValue="Value 1" size="m">{options}</SegmentedRadioGroup>
<SegmentedRadioGroup name="group3" defaultValue="Value 1" size="l">{options}</SegmentedRadioGroup>
<SegmentedRadioGroup name="group4" defaultValue="Value 1" size="xl">{options}</SegmentedRadioGroup>Width
Use the width property to manage the SegmentedRadioGroup width:
<div style={{width: 140, border: '2px dashed gray'}}>
<div style={{marginBottom: 10}}>
<SegmentedRadioGroup>
<SegmentedRadioGroup.Option value="1" content="none" />
<SegmentedRadioGroup.Option value="2" content="none********" />
</SegmentedRadioGroup>
</div>
<div style={{marginBottom: 10}}>
<SegmentedRadioGroup width="auto">
<SegmentedRadioGroup.Option value="1" content="auto" />
<SegmentedRadioGroup.Option value="2" content="auto********" />
</SegmentedRadioGroup>
</div>
<div>
<SegmentedRadioGroup width="max">
<SegmentedRadioGroup.Option value="1" content="max" />
<SegmentedRadioGroup.Option value="2" content="max" />
</SegmentedRadioGroup>
</div>
</div>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.
const options: SegmentedRadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<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} />
</RadioGroup>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 |