Components / Form
Checkbox
Checkbox structure
<div class="form-group form-radio-check">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked> Checked
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked disabled> Check disabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" disabled> Check disabled
</label>
</div>
</div>
Checkbox validation
<div class="form-group form-radio-check field-error">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<span id="checkbox-error" class="form-text error">Campo obbligatorio.</span>
</div>
Checkbox with right element
The checkbox can be builded with other components ( link
, tooltip
, modal
) on his right, following the structure below
<div class="checkbox-info">
<div class="checkbox-container">
<div class="form-group form-radio-check radio-esempio-modale">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_modale" value="option3" id="checkbox_modale" checked> Addebito degli interessi sul conto corrente
</label>
</div>
</div>
</div>
<div class="info">
<a class="link modal-open" href="#" data-target="#addebito"><i class="fas fa-info-circle"></i>Maggiori info</a>
</div>
</div>