Radio

The radio component (.radio) styles a native <input type="radio"> the same way .checkbox styles a checkbox: a visually-hidden real input for accessibility, paired with a styled circle-and-dot visual. Because radios sharing a name are mutually exclusive, flickui.js clears .is-checked from every other radio in the group whenever one is selected.

Plan Free Pro

<fieldset class="radio-group">
  <legend class="radio-group-legend">Plan</legend>
  <label class="radio">
    <input type="radio" class="radio-input" name="plan" value="free" checked>
    <span class="radio-circle" aria-hidden="true"><span class="radio-dot"></span></span>
    <span class="radio-label">Free</span>
  </label>
  <label class="radio">
    <input type="radio" class="radio-input" name="plan" value="pro">
    <span class="radio-circle" aria-hidden="true"><span class="radio-dot"></span></span>
    <span class="radio-label">Pro</span>
  </label>
</fieldset>