Checkbox
Controllo per la selezione di opzioni
Per utilizzare i checkbox personalizzati è necessario inserire la classe .form-check nell’elemento padre.
Per allineare orizzontalmente le checkbox basterà aggiungere la classe .form-check-inline a qualsiasi .form-check.
Affinchè i campi checkbox e radio risultino disabilitati occorrerà aggiungere l’attributo disabled all’input e la classe .disabled alla label relativa.
<div>
<div class="row">
<div class="form-check">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox di esempio</label>
</div>
</div>
<div class="row">
<div class="form-check form-check-inline">
<input id="checkbox2" type="checkbox" disabled>
<label for="checkbox2" class="disabled">Checkbox non selezionato disabilitato</label>
</div>
<div class="form-check form-check-inline">
<input id="checkbox3" type="checkbox" checked="checked">
<label for="checkbox3">Checkbox selezionato</label>
</div>
</div>
</div>Gruppi di Checkbox
Per poter raggruppare gli elementi checkbox occorrerà aggiungere al .form-check la classe .form-check-group. L’elemento grafico di spunta verrà allineato alla destra del contenuto testuale.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
<div>
<div class="row">
<div class="col-5">
<div class="form-check form-check-group">
<input id="checkbox6" type="checkbox" checked="checked">
<label for="checkbox6">Checkbox selezionato</label>
</div>
<div class="form-check form-check-group">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">Checkbox non selezionato</label>
</div>
<div class="form-check form-check-group">
<input id="checkbox8" type="checkbox" disabled="disabled">
<label for="checkbox8" class="disabled">Checkbox disabilitato non selezionato</label>
</div>
</div>
<div class="col-2"></div>
<div class="col-5">
<div class="form-check form-check-group">
<input id="checkbox9" type="checkbox" aria-labelledby="checkbox9-help" checked="checked">
<label for="checkbox9">Checkbox selezionato</label>
<small id="checkbox9-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
<div class="form-check form-check-group">
<input id="checkbox10" type="checkbox" aria-labelledby="checkbox10-help">
<label for="checkbox10">Checkbox non selezionato</label>
<small id="checkbox10-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
<div class="form-check form-check-group">
<input id="checkbox11" type="checkbox" aria-labelledby="checkbox11-help" disabled="disabled">
<label for="checkbox11" class="disabled">Checkbox disabilitato non selezionato</label>
<small id="checkbox11-help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</small>
</div>
</div>
</div>
</div>