@gravity-ui/uikit
Version:
Gravity UI base styling and components
91 lines (73 loc) • 5.1 kB
Markdown
# RadioGroup
The `RadioGroup` component is used to create a group where users can select a single option from multiple choices.
```tsx
import {RadioGroup} from '@gravity-ui/uikit';
```
### Disabled state
```tsx
const options: RadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group2" defaultValue={options[0].value} options={options} disabled />;
```
### Size
Use the `size` property to manage the `RadioGroup` size. The default size is `m`.
```tsx
const options: RadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value} options={options} size="m"/>
<RadioGroup name="group2" defaultValue={options[0].value} options={options} size="l"/>
<RadioGroup name="group3" defaultValue={options[0].value} options={options} size="xl"/>
```
### Direction
Use the `direction` property to manage the `RadioGroup` direction. The default direction is `horizontal`.
```tsx
const options: RadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value} options={options} direction="horizontal"/>
<RadioGroup name="group2" defaultValue={options[0].value} options={options} direction="vertical"/>
```
## Properties
| Name | Description | Type | Default |
| :-------------- | :------------------------------------------------------------------------------------------------ | :-----------------------: | :------------: |
| children | The content of the radio group. | `ReactNode` | |
| disabled | Toggles the `disabled` state of the radio group. | `boolean` | `false` |
| options | Options for radio group. | `RadioGroupOption[]` | |
| optionClassName | `class` HTML attribute for the radio children. | `string` | |
| direction | Determines the direction of the radio group. | `horizontal - vertical` | `"horizontal"` |
| defaultValue | Sets the initial value state when the component is mounted. | `string` | |
| onUpdate | Fires when the user changes the radio state and provides the new value as a callback argument. | `(value: string) => void` | |
| onChange | Fires when the user changes the radio state and provides the change event as a callback argument. | `Function` | |
| size | Determines the size of the radio group. | `m` `l` | `m` |
| qa | `data-qa` HTML attribute, used for testing | `string` | |
| style | `style` HTML attribute | `React.CSSProperties` | |
| className | `class` HTML attribute | `string` | |
## RadioGroup.Option
The `RadioGroup` component also exports a nested `Option` component equivalent to `Radio`, which can be used to create radio options within the `RadioGroup`.
```tsx
const options: RadioGroupOption[] = [
{value: 'Value 1', content: 'Value 1'},
{value: 'Value 2', content: 'Value 2'},
{value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value}>
<RadioGroup.Option content={options[0].content} value={options[0].value} />
<RadioGroup.Option content={options[1].content} value={options[1].value} />
<RadioGroup.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` | |