# Radio Buttons

> Material Design 3 radios, from the HTML.

## Anatomy

A `<label>` wrapping `<input type="radio">` is the control. The label text is a sibling of the input — no extra class, no required `<span>`. They are CSS only. There is no JavaScript component and nothing to AutoInit.

Tokens follow the [M3 radio spec](https://m3.material.io/components/radio-button/specs). The icon is a 20dp ring with a 2dp stroke. Selected is `primary` with a 10dp inner disc (the M3 gap). The state layer is 40dp at 8% hover and 10% focus. The touch target is 48dp. The label is `body-large` / `on-surface`. Disabled is `on-surface` at 38%.

Use the same `name` on every radio in a group. Add `disabled` to disable one. `with-gap` is a no-op — the selected state is always the ring plus inner disc.

Colour  Red  Yellow  Green  Brown

```
<fieldset>
  <legend>Colour</legend>
  <label>
    <input name="group1" type="radio" checked>
    Red
  </label>
  <label>
    <input name="group1" type="radio">
    Yellow
  </label>
  <label>
    <input name="group1" type="radio" disabled>
    Brown
  </label>
</fieldset>
```

An `input + span` still works if you already have that markup, or if you follow BeerCSS’s `<label class="radio">` pattern.

```
<fieldset>
  <legend>Colour</legend>
  <label class="radio">
    <input type="radio" name="group1">
    <span>Yellow</span>
  </label>
</fieldset>
```

## In a row

Put the labels in a `<div class="inline">` to sit them on one line. A bare group stacks vertically.

Colour

 Red Yellow  Green

```
<fieldset>
  <legend>Colour</legend>
  <div class="inline">
    <label>
      <input name="group2" type="radio" checked>
      Red
    </label>
    <label>
      <input name="group2" type="radio">
      Yellow
    </label>
  </div>
</fieldset>
```