Forms

Radios

The native <input type="radio"> with a custom and responsive style.

Language preference:EnglishFrenchMandarinThaiDothraki

<fieldset>  <legend>Language preference:</legend>  <label>  <input type="radio" name="language" checked />  English  </label>  <label>  <input type="radio" name="language" />  French  </label>  <label>  <input type="radio" name="language" />  Mandarin  </label>  <label>  <input type="radio" name="language" />  Thai  </label>  <label aria-disabled="true">  <input type="radio" name="language" disabled />  Dothraki  </label> </fieldset>

Horizontal stacking#

Second language:HindiSwahiliNa'vi

<fieldset>  <legend>Second language:</legend>  <input type="radio" id="hindi" name="second-language" checked />  <label htmlFor="hindi">Hindi</label>  <input type="radio" id="swahili" name="second-language" />  <label htmlFor="swahili">Swahili</label>  <input type="radio" id="navi" name="second-language" disabled />  <label htmlFor="navi" aria-disabled="true">Na'vi</label> </fieldset>

Validation states#

Validation states are provided with aria-invalid.

ValidInvalid

<fieldset>  <label>  <input type="radio" name="validation-states" aria-invalid="false" />  Valid  </label>   <label>  <input type="radio" name="validation-states" aria-invalid="true" />  Invalid  </label> </fieldset>

Edit this page on GitHub