DSO Component Library

Input Group: Checkbox 

<div class="input-group ">
    <span class="input-group-addon">
      <input type="checkbox" aria-label="Activeer veld"/>
    </span>
    <input type="text" class="form-control" aria-label="Vul naam in" placeholder="Gebruikersnaam" />
</div>
 
<div class="input-group {{ modifier }}">
  {{#if checkboxLeft }}
    <span class="input-group-addon">
      <input type="checkbox" aria-label="{{ ariaLabelAddon }}"/>
    </span>
  {{/if}}
  <input type="text" class="form-control" aria-label="{{ ariaLabel }}" {{{ifattr 'placeholder' placeholder}}}/>
  {{#if checkboxRight }}
    <span class="input-group-addon">
      <input type="checkbox" aria-label="{{ ariaLabelAddon }}"/>
    </span>
  {{/if}}
</div>
 
id: checkbox
placeholder: Gebruikersnaam
checkboxLeft: true
ariaLabelAddon: Activeer veld
ariaLabel: Vul naam in

Maak visueel uitgebreide elementen met input groups. Combineer een input group niet met een form group, maar plaats de input group in plaats daarvan IN de form group.