Чекбокс

Чекбокс позволяет включать и выключать параметр независимо от остальных. Добавьте 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-переменные.