## Default

Radios allow the user to select a single option from a group. \nRadios are designed to be used with radio groups.

```html
<syn-radio> Option </syn-radio>
```

---

## Initial Value

To set the initial value and checked state, use the value attribute on the radio element.

```html
<syn-radio-group value="1">
  <syn-radio value="1" selected="">Option</syn-radio>
</syn-radio-group>
```

---

## Focus

The focus event gives the user feedback that the Radio has been focused by the keyboard interaction.

```html
<syn-radio value="1">Option</syn-radio>
```

---

## Disabled

Use the disabled attribute to disable a radio.

```html
<syn-radio value="1" disabled="">Option</syn-radio>
```

---

## Readonly

Add the readonly attribute to draw a read-only radio.

```html
<syn-radio-group value="1">
  <syn-radio value="1" readonly="">Read-only content</syn-radio>
</syn-radio-group>
```

---

## Sizes

Add the size attribute to the Radio Group to change the radios’ size.

```html
<div
  style="display: flex; flex-direction: column; gap: var(--syn-spacing-large)"
>
  <syn-radio value="1" size="small">Option</syn-radio>
  <syn-radio value="2" size="medium">Option</syn-radio>
  <syn-radio value="3" size="large">Option</syn-radio>
</div>
```

---

## Invalid

The invalid status is used to warn the user that the Radio is invalid. For example, if the radio is mandatory and nothing has been checked.

```html
<form class="custom-validity">
  <syn-radio-group required="" value="2">
    <syn-radio value="1">Invalid</syn-radio>
    <syn-radio value="2">Invalid</syn-radio>
  </syn-radio-group>
  <syn-button type="submit" variant="filled">Submit</syn-button>
</form>
<style>
  .custom-validity {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  syn-button {
    align-self: flex-start;
  }
</style>
```
