# Radio

[component-header:sl-radio]

Radios allow the user to select one option from a group of many.

```html preview
<sl-radio>Radio</sl-radio>
```

## Examples

### Checked

Use the `checked` attribute to activate the radio.

```html preview
<sl-radio checked>Checked</sl-radio>
```

### Sizes

Use the `size` attribute to set the size of the radio.

```html preview
<sl-radio size="small">Small</sl-radio>
<sl-radio size="medium">Medium</sl-radio>
<sl-radio size="large">Large</sl-radio>

```

### Disabled

Use the `disabled` attribute to disable the radio.

```html preview
<sl-radio disabled>Disabled</sl-radio>
```

### Grouping Radios

Radios are grouped based on their `name` attribute and scoped to the nearest form.

```html preview
<sl-radio name="option" checked>Option 1</sl-radio><br />
<sl-radio name="option">Option 2</sl-radio><br />
<sl-radio name="option">Option 3</sl-radio><br />
<sl-radio name="option">Option 4</sl-radio>
```

[component-metadata:sl-radio]