@gravity-ui/uikit
Version:
Gravity UI base styling and components
74 lines (59 loc) • 5.07 kB
Markdown
# Radio
The `Radio` component allows the users to select a single option from a list of choices.
```tsx
import {Radio} from '@gravity-ui/uikit';
```
## States
`Radio` can have the following states:
- Checked: Radio is selected.
- Disabled: Radio is unavailable for selection.
```tsx
<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`.
```tsx
<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.
```tsx
<div>
<Radio content="Content" size="l" />
<div
style={{
marginTop: 10,
}}
>
<Radio size="l">
<span>Content as children</span>
</Radio>
</div>
</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>` | |