Bootstrap 5 Casella di Spunta e Bottone Radio

Caselle di controllo

Se desiderate che gli utenti possano selezionare una quantità arbitraria di opzioni dalla lista predefinita, utilizzare le caselle di controllo.

Esempio

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">Opzione 1</label>
</div>

Prova personalmente

esempio di spiegazione

Per impostare lo stile delle caselle di controllo, utilizzare class="form-check" per assicurarsi che l'etichetta e la casella di controllo abbiano margini adeguati.

quindi, aggiungere l'elemento di contenimento per .form-check-label aggiungere la classe alla etichetta dell'elemento e poi .form-check-input aggiungere a .form-check all'interno del contenitore per impostare correttamente lo stile del pulsante di spunta.

Se desideri selezionare predefinitamente il pulsante di spunta, utilizza checked Proprietà.

Pulsante di opzione

Se desideri limitare l'utente a scegliere una delle opzioni predefinite dalla lista, utilizza il pulsante di opzione.

Esempio

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Opzione 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Opzione 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Opzione 3
  <label class="form-check-label"></label>
</div>

Prova personalmente

Interruttore

Se desideri impostare il pulsante di spunta come stile di selettore di commutazione, imposta .form-switch Classe e .form-check Utilizzo congiunto del contenitore:

Esempio

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">Modalità scura</label>
</div>

Prova personalmente