Radio

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

Markup

<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>

Classless radio

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

<form class="af-form">
  <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>
</form>

Live example

Option 1Option 2Disabled