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

Campo obbligatorio.
<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>