表单

复选框

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

查看源码

<fieldset>
<legend>Language preferences:</legend>
<label>
  <input type="checkbox" name="english" checked />
  English
</label>
<label>
  <input type="checkbox" name="french" checked />
  French
</label>
<label>
  <input type="checkbox" name="mandarin" />
  Mandarin
</label>
<label>
  <input type="checkbox" name="thai" />
  Thai
</label>
<label aria-disabled="true">
  <input type="checkbox" name="dothraki" disabled />
  Dothraki
</label>
</fieldset>

水平排列

Language preferences:HindiSwahiliNa'vi

查看源码

<fieldset>
<legend>Language preferences:</legend>
<input type="checkbox" id="hindi" name="hindi" checked />
<label htmlFor="hindi">Hindi</label>
<input type="checkbox" id="swahili" name="swahili" />
<label htmlFor="swahili">Swahili</label>
<input type="checkbox" id="navi" name="navi" disabled />
<label htmlFor="navi" aria-disabled="true">Na'vi</label>
</fieldset>

不确定状态

将复选框的 indeterminate 属性设置为 true，即可让它呈现不确定状态。

Indeterminate

查看源码

<label>
<input type="checkbox" id="indeterminate" name="indeterminate" />
Indeterminate
</label>

<script>
const checkbox = document.querySelector('#indeterminate');
checkbox.indeterminate = true;
</script>

验证状态

通过 aria-invalid 提供验证状态。

ValidInvalid

查看源码

<label>
<input type="checkbox" name="valid" aria-invalid="false" />
Valid
</label>

<label>
<input type="checkbox" name="invalid" aria-invalid="true" />
Invalid
</label>