Radio

Radio buttons for selecting a single option from a group. Labels automatically use flex layout when they contain radios.

Control size uses --af-choice-size (default 1.5rem, shared with checkbox and the switch track height). Override it to scale all choice controls together — see Tokens.

Markup

Option 1 Option 2 Disabled

<div class="af-stack af-gap-sm">
  <label>
    <input type="radio" name="radio-demo" class="af-radio" checked />
    <span>Option 1</span>
  </label>
  <label>
    <input type="radio" name="radio-demo" class="af-radio" />
    <span>Option 2</span>
  </label>
</div>

Classless radio

Radios also work without classes inside form.af-form:

<form class="af-form">
  <div class="af-stack af-gap-sm">
    <label>
      <input type="radio" name="theme" value="light" checked />
      <span>Light theme</span>
    </label>
    <label>
      <input type="radio" name="theme" value="dark" />
      <span>Dark theme</span>
    </label>
  </div>
</form>