Tworzenie dostępnych elementów sterujących przełącznikami

Funkcje internetowe: <input type="checkbox" switch> accent-color

Użyj atrybutu HTML switch w elemencie <input type="checkbox" switch> z powiązanym elementem <label>, aby utworzyć binarny przełącznik, który zachowuje natywne przesyłanie formularzy, nawigację za pomocą klawiatury i semantykę czytnika ekranu (zobacz Styling Checkboxes i Forms).

Znacznik

Dodaj atrybut logiczny switch do standardowego pola wyboru:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • Etykieta może otaczać element wejściowy lub być powiązana z for/id. Wszystkie style są stosowane do elementu wejściowego, więc nie zależą od struktury etykiety.
  • Gdy to pole jest zaznaczone, dane wejściowe przesyłają standardową wartość pola wyboru. W języku JavaScript nasłuchuj zdarzeń change (lub input) i odczytuj .checked zamiast .value.

Styl

Dostosuj kolor wyróżnienia elementu sterującego za pomocą accent-color (patrz Formularze zgodne z marką) i upewnij się, że styl zaznaczenia jest widoczny:

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;
}

Strategie zastępcze

Kreacje zastępcze i obsługa przełączników przez przeglądarki

Jeśli Twój cel Baseline nie obsługuje <input type="checkbox" switch>, wczytuj input-switch-polyfill tylko wtedy, gdy 'switch' in HTMLInputElement.prototype to false. Nie wczytuj polyfilla bezwarunkowo. Polyfill ulepsza pola wyboru z atrybutem switch, ustawiając role="switch", stosując styl przełącznika (appearance: none), synchronizując obliczone accent-color i zapewniając obsługę przeciągania wskaźnika.

Użyj metody wczytywania pakietów odpowiedniej dla Twojego projektu. W przykładzie poniżej zakładamy, że Twoja konfiguracja może rozpoznawać specyfikatory modułów:

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

Kreacje zastępcze i obsługa koloru uzupełniającego w przeglądarkach

Właściwość accent-color jest progresywnym ulepszaniem. Przeglądarki, które nie obsługują tej właściwości, zignorują ją i użyją domyślnych kolorów interfejsu.