Checkbox

Example

Language preferences:You can't disable the default language
HTML
<fieldset>
  <legend>
    Language preferences:
  </legend>
  <label>
    <input type="checkbox" name="english" checked disabled aria-describedby="default-language-hint">
    English
  </label>
  <small id="default-language-hint">
    You can't disable the default language
  </small>
  <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>
    <input id="indeterminate-checkbox" type="checkbox" name="quenya">
    Quenya
  </label>
  <label>
    <input type="checkbox" name="dothraki" disabled>
    Dothraki
  </label>
</fieldset>

Hint

We will send you a news letter every week
HTML
<label>
  <input type="checkbox" name="newsletter" aria-describedby="newsletter-hint" checked>
  Newsletter
</label>
<small id="newsletter-hint">
  We will send you a news letter every week
</small>

Validation

You can indicate the validation state of the checkbox using the attribute aria-invilid with the values true and false.

Looks good!Please provide a valid value!
HTML
<label>
  <input type="checkbox" name="valid" aria-invalid="false" aria-describedby="valid-hint">
  Valid
</label>
<small id="valid-hint">
  Looks good!
</small>
<label>
  <input type="checkbox" name="invalid" aria-invalid="true" aria-describedby="invalid-hint" checked>
  Invalid
</label>
<small id="invalid-hint">
  Please provide a valid value!
</small>