@gravity-ui/uikit
Version:
Gravity UI base styling and components
107 lines (88 loc) • 6.31 kB
Markdown
# SegmentedRadioGroup
The `SegmentedRadioGroup` component is used to create a group of radio buttons where users can select a single option from multiple choices.
```tsx
import {SegmentedRadioGroup} from '@gravity-ui/uikit';
```
### Disabled state
```tsx
<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`.
```tsx
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:
```tsx
<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`.
```tsx
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} />
</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` | |