Generatore di toggle switch (interruttore on/off) CSS
Regola la dimensione e i colori e prova l’anteprima. Il codice usa un vero checkbox, quindi funziona nei form e con la tastiera.
Come si usaInterruttore on/off senza JavaScript
Disponibile in: 
Generatore di toggle switch (interruttore on/off) CSS: a cosa serve
L’interruttore on/off si usa nelle preferenze, nei form di registrazione e nelle impostazioni. Questo generatore crea l’interruttore con un vero checkbox stilizzato con CSS, senza JavaScript: conserva lo stato, funziona con tastiera e touch, viene inviato insieme al form ed è annunciato come attivo o disattivo dallo screen reader grazie a role=switch.
Regoli larghezza, altezza, angoli e colori e provi il risultato attivo, disattivo e disabilitato. Il codice include il focus visibile, la transizione fluida che rispetta chi preferisce meno animazioni e la modalità ad alto contrasto.
Come si usa
- Regola dimensione e angoli.
- Scegli i colori e il testo dell’etichetta.
- Copia l’HTML e il CSS.
Quando usarlo
- Preferenze di notifica.
- Modalità scura del sito.
- Accettazione dei termini in un form.
Domande frequenti
Serve JavaScript?
Non per funzionare. Solo se vuoi fare qualcosa nel momento in cui l’interruttore cambia, come salvare la preferenza: in quel caso basta ascoltare l’evento change dell’input.
Che dimensione usare su smartphone?
L’area di tocco deve essere di almeno 24 per 24 px secondo le WCAG 2.2, e per il dito è consigliato circa 44 px. Poiché anche il testo accanto fa parte del label, aumenta l’area cliccabile.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.