Создание доступных элементов управления переключателями

Веб-функции: <input type="checkbox" switch> accent-color

Используйте атрибут HTML switch в элементе <input type="checkbox" switch> со связанным элементом <label>, чтобы создать двоичный переключатель, который сохраняет нативную отправку формы, навигацию с помощью клавиатуры и семантику программы чтения с экрана (см. Стилизация флажков и Формы).

Markup

Добавьте логический атрибут switch в стандартный флажок:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • Ярлык может быть оберткой для поля ввода или быть связан с for/id. Все стили применяются к полю ввода, поэтому они не зависят от структуры ярлыка.
  • Если флажок установлен, отправляется стандартное значение. В JavaScript прослушивайте события change (или input) и считывайте .checked, а не .value.

Стилизация

Настройте цвет выделения элемента управления с помощью accent-color (см. Формы в фирменном стиле) и убедитесь, что фокус виден:

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

Резервные стратегии

Резервные объявления и поддержка браузеров для управления переключателями

Если целевой набор Baseline не поддерживает <input type="checkbox" switch>, загружайте input-switch-polyfill, только когда 'switch' in HTMLInputElement.prototype – false. Не загружайте полифил без необходимости. Полифил улучшает флажки с атрибутом switch, устанавливая role="switch", применяя стиль переключателя (appearance: none), синхронизируя вычисленный accent-color и обеспечивая поддержку перетаскивания указателя.

Используйте подход к загрузке пакетов, подходящий для вашего проекта. В примере ниже предполагается, что ваша конфигурация может разрешать спецификаторы модулей:

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

Резервные варианты и поддержка свойства accent-color в браузерах

Свойство accent-color – это прогрессивное улучшение. Браузеры, которые не поддерживают это свойство, будут игнорировать его и использовать цвета интерфейса по умолчанию.