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.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<span class="input-group-addon" id="left_left-addon">@</span>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Input Group

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<input type="text" class="form-control" title="Gebruikersnaam" placeholder="Gebruikersnaam" aria-describedby="left_left-addon">