kit

Radio group

Native radios in a fieldset for one choice from a few, as a list, a row or a set of tiles.

Tier 1 · CSS only Native radio preview

Example

Group label
Row layout
Tiles
Show the markup 
<div class="demo-stack">
  <fieldset class="kit-fieldset">
    <legend>Group label</legend>
    <label class="kit-choice"><input type="radio" class="kit-radio" name="rg-a" checked> Option one</label>
    <label class="kit-choice"><input type="radio" class="kit-radio" name="rg-a"> Option two<span class="kit-choice-hint">Optional hint text</span></label>
  </fieldset>
  <fieldset class="kit-fieldset" data-layout="row">
    <legend>Row layout</legend>
    <label class="kit-choice"><input type="radio" class="kit-radio" name="rg-b" checked> Option one</label><label class="kit-choice"><input type="radio" class="kit-radio" name="rg-b"> Option two</label><label class="kit-choice"><input type="radio" class="kit-radio" name="rg-b" disabled> Option three</label>
  </fieldset>
  <fieldset class="kit-fieldset demo-fill" data-variant="cards">
    <legend>Tiles</legend>
    <label class="kit-choice"><input type="radio" class="kit-radio" name="rg-c"> Option one<span class="kit-choice-hint">Hint text</span></label><label class="kit-choice"><input type="radio" class="kit-radio" name="rg-c" checked> Option two<span class="kit-choice-hint">Hint text</span></label><label class="kit-choice"><input type="radio" class="kit-radio" name="rg-c"> Option three<span class="kit-choice-hint">Hint text</span></label>
  </fieldset>
</div>

Usage

<fieldset class="kit-fieldset">
  <legend>Billing period</legend>
  <label class="kit-choice"><input type="radio" class="kit-radio" name="period" value="monthly" checked> Monthly</label>
  <label class="kit-choice"><input type="radio" class="kit-radio" name="period" value="yearly"> Yearly<span class="kit-choice-hint">Two months free</span></label>
</fieldset>
Attribute Values Default
data-layout row (stacks again on phones) a list
data-variant cards, a bordered tile per option plain

Use radios when the options need room to explain themselves; for two to five short options in a toolbar, the segmented control is tighter.

Accessibility

  • The <fieldset> and <legend> name the group, so each option is read as "Yearly, radio button, 2 of 2, Billing period".
  • Arrow keys move and choose within the group and Tab leaves it: the browser does this for radios sharing a name.
  • Check one option by default unless choosing nothing is meaningful.
  • Tiles show focus on the whole tile; their selected state is a border and ring, not colour alone.