DSO Component Library

Input Group: Button 

<div class="input-group default">
    <span class="input-group-btn">
      <button type="button" class="btn btn-default" >
          Zoek
      </button>
    </span>
    <input type="text" class="form-control" aria-label="Gebruikersnaam" placeholder="Gebruikersnaam" />
</div>
 
<div class="input-group {{ modifier }}">
  {{#if buttonLeft }}
    <span class="input-group-btn">
      {{> '@button' }}
    </span>
  {{/if}}
  <input type="text" class="form-control" aria-label="{{ ariaLabel }}" {{{ifattr 'placeholder' placeholder}}} {{{ifattr 'value' value}}}/>
  {{#if buttonRight }}
    <span class="input-group-btn">
      {{> '@button' }}
    </span>
  {{/if}}
</div>
 
id: button
placeholder: Gebruikersnaam
buttonLeft: true
label: Zoek
type: button
modifier: default
ariaLabel: Gebruikersnaam

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">