Чекбокс

Чекбокс дає змогу вмикати й вимикати параметр незалежно від інших. Додайте checked, щоб позначити чекбокс початково.

#Нативні елементи

За часткового вибору задайте властивість DOM indeterminate через JavaScript. У разі помилки валідації вкажіть aria-invalid="true" і зв’яжіть чекбокс із повідомленням через aria-describedby.

<label>
  <input type="checkbox" checked />
  Увімкнути оновлення
</label>
<label>
  <input type="checkbox" />
  Запам’ятати налаштування
</label>
<label>
  <input type="checkbox" disabled />
  Недоступний параметр
</label>
<label>
  <input id="checkbox-mixed" type="checkbox" />
  Вибрати все
</label>
<div>
  <label>
    <input type="checkbox" aria-invalid="true" aria-describedby="checkbox-error" />
    Прийняти умови
  </label>
  <small id="checkbox-error">Прийміть умови, щоб продовжити.</small>
</div>

document.getElementById('checkbox-mixed').indeterminate = true;

#Класи розширень

Повна збірка додає trace-small і trace-large. Середній розмір застосовується типово.

<label>
  <input type="checkbox" class="trace-small" />
  Малий
</label>
<label>
  <input type="checkbox" />
  Середній
</label>
<label>
  <input type="checkbox" class="trace-large" />
  Великий
</label>

Оформлення задають CSS-змінні.