表单

单选框

原生 <input type="radio">，采用自定义且响应式的样式。

查看源码

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

水平排列

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>

验证状态

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