Crea controlli con sensori accessibili

Utilizza l'attributo HTML switch su <input type="checkbox" switch> con un <label> associato per creare un pulsante di attivazione/disattivazione binario che preservi l'invio di moduli nativi, la navigazione da tastiera e la semantica dello screen reader (consulta Applicazione di stili alle caselle di controllo e Moduli).

Segni e linee

Aggiungi l'attributo booleano switch a un input di casella di controllo standard:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>

• L'etichetta può racchiudere l'input o essere associata a for/id. Tutti gli stili hanno come target l'input, quindi non dipendono dalla struttura dell'etichetta.
• Se questa opzione è selezionata, l'input invia il valore della casella di controllo standard. In JavaScript, ascolta gli eventi change (o input) e leggi .checked anziché .value.

Stili

Personalizza il colore di evidenziazione del controllo utilizzando accent-color (consulta Moduli coerenti con il brand) e assicurati che lo stile di messa a fuoco sia visibile:

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 di riserva

Opzioni di riserva e supporto del browser per il controllo tramite switch

Se il tuo target Baseline non supporta <input type="checkbox" switch>, carica input-switch-polyfill solo quando 'switch' in HTMLInputElement.prototype è false. Non caricare il polyfill in modo incondizionato. Il polyfill migliora le caselle di controllo con l'attributo switch impostando role="switch", applicando lo stile di attivazione/disattivazione (appearance: none), sincronizzando il valore accent-color calcolato e fornendo il supporto per il trascinamento del puntatore.

Utilizza l'approccio di caricamento dei pacchetti appropriato per il tuo progetto. L'esempio seguente presuppone che la tua configurazione possa risolvere gli identificatori dei moduli:

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

Alternative e supporto dei browser per accent-color

La proprietà accent-color è un potenziamento progressivo. I browser che non supportano questa proprietà la ignoreranno e utilizzeranno i colori predefiniti della UI.