Componente
Toggle
Interruttori acceso/spento: checkbox nativo con role=switch e daisyUI toggle nel colore primario. L'etichetta sta a sinistra e l'interruttore sul bordo destro, come in bootstrap-italia.
- Riferimento
<it-toggle>- Classi
ita-toggleita-toggle-smita-toggle-lgita-choiceita-choice-endita-choice-textita-choice-hintita-choice-groupita-legendita-choice-list- Basato su (daisyUI)
togglefieldset- Solo CSS
- È un checkbox: Spazio lo attiva, il valore viaggia col form. role=switch fa annunciare «attivo/disattivo» invece di «selezionato».
- Storybook
- Apri le storie di Toggle
Esempio base
Mostra il codice HTMLNascondi il codice HTML
<div class="flex max-w-md flex-col gap-4">
<label for="toggle-46" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>Notifiche push</span></span><input type="checkbox" id="toggle-46" class="ita-toggle" role="switch"></label>
<label for="toggle-47" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>Modalità risparmio dati</span></span><input type="checkbox" id="toggle-47" class="ita-toggle" checked role="switch"></label>
</div>Gruppo di impostazioni
Mostra il codice HTMLNascondi il codice HTML
<div class="max-w-md"><fieldset class="ita-choice-group">
<legend class="ita-legend">Preferenze di contatto</legend>
<div class="ita-choice-list">
<label for="toggle-49" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>Email</span><span id="toggle-49-hint" class="ita-choice-hint">Un riepilogo alla settimana.</span></span><input type="checkbox" id="toggle-49" class="ita-toggle" checked role="switch" aria-describedby="toggle-49-hint"></label>
<label for="toggle-50" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>SMS</span><span id="toggle-50-hint" class="ita-choice-hint">Solo per le scadenze.</span></span><input type="checkbox" id="toggle-50" class="ita-toggle" role="switch" aria-describedby="toggle-50-hint"></label>
<label for="toggle-51" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>App IO</span><span id="toggle-51-hint" class="ita-choice-hint">Avvisi e ricevute di pagamento.</span></span><input type="checkbox" id="toggle-51" class="ita-toggle" checked role="switch" aria-describedby="toggle-51-hint"></label>
</div>
</fieldset></div>Etichetta a destra
Mostra il codice HTMLNascondi il codice HTML
<div class="flex flex-col gap-4">
<label for="toggle-52" class="ita-choice"><input type="checkbox" id="toggle-52" class="ita-toggle" role="switch"><span class="ita-choice-text"><span>Ricordami su questo dispositivo</span></span></label>
<label for="toggle-53" class="ita-choice"><input type="checkbox" id="toggle-53" class="ita-toggle" checked role="switch"><span class="ita-choice-text"><span>Mostra il contrasto elevato</span></span></label>
</div>Disabilitato
Mostra il codice HTMLNascondi il codice HTML
<div class="flex max-w-md flex-col gap-4">
<label for="toggle-54" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>Interruttore disabilitato</span></span><input type="checkbox" id="toggle-54" class="ita-toggle" disabled role="switch"></label>
<label for="toggle-55" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>Interruttore attivo e disabilitato</span></span><input type="checkbox" id="toggle-55" class="ita-toggle" checked disabled role="switch"></label>
</div>Dimensioni
toggle-lg si avvicina al 56×32px di bootstrap-italia.
Mostra il codice HTMLNascondi il codice HTML
<div class="flex max-w-md flex-col gap-4">
<label for="toggle-56" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>Piccolo</span></span><input type="checkbox" id="toggle-56" class="ita-toggle ita-toggle-sm" checked role="switch"></label>
<label for="toggle-57" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>Standard</span></span><input type="checkbox" id="toggle-57" class="ita-toggle" checked role="switch"></label>
<label for="toggle-58" class="ita-choice ita-choice-end"><span class="ita-choice-text"><span>Grande</span></span><input type="checkbox" id="toggle-58" class="ita-toggle ita-toggle-lg" checked role="switch"></label>
</div>