# Radio Group

[component-header:sl-radio-group]

The Radio Group allows the user to select defined radio buttons.

Use [Radio](/components/radio)-component inside the radio group.

Here is an example of a simple radio group.

```html preview
<sl-radio-group id="radiogroup">
  <sl-radio value="blue">Blue</sl-radio>
  <sl-radio value="red">Red</sl-radio>
  <sl-radio value="white">White</sl-radio>
  <sl-radio value="yellow">Yellow</sl-radio>
  <sl-radio value="green">Green</sl-radio>
</sl-radio-group>
<script>
  document.getElementById('radiogroup').addEventListener('valueChange', e => console.log(e.detail));
</script>
```

## Examples

### Checked

Use the `checked` attribute on a color component to mark the radio checked.

```html preview
<sl-radio-group>
  <sl-radio value="blue">Blue</sl-radio>
  <sl-radio value="red">Red</sl-radio>
  <sl-radio value="white" checked>White</sl-radio>
  <sl-radio value="yellow">Yellow</sl-radio>
  <sl-radio value="green">Green</sl-radio>
</sl-radio-group>
```

### Disabled

Use the `disabled` attribute on a radio component to disable the radio.

```html preview
<sl-radio-group>
  <sl-radio value="blue">Blue</sl-radio>
  <sl-radio value="red" disabled>Red</sl-radio>
  <sl-radio value="white">White</sl-radio>
  <sl-radio value="yellow" disabled>Yellow</sl-radio>
  <sl-radio value="green">Green</sl-radio>
</sl-radio-group>
```

[component-metadata:sl-radio-group]