# 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>`         |         |