DSO Component Library

Input Group 

<!-- Left -->
<div class="input-group ">
    <span class="input-group-addon" id="left_left-addon">@</span>
    <input type="text" class="form-control" title="Gebruikersnaam" placeholder="Gebruikersnaam" aria-describedby="left_left-addon" />
</div>


<!-- Right -->
<div class="input-group ">
    <input type="text" class="form-control" title="Gebruikersnaam van de ontvanger" placeholder="Gebruikersnaam van de ontvanger" aria-describedby="right_right-addon" />
    <span class="input-group-addon" id="right_right-addon">@rws.nl</span>
</div>


<!-- Double -->
<div class="input-group ">
    <span class="input-group-addon">€</span>
    <input type="text" class="form-control" aria-label="Bedrag (afgerond in hele Euro&#x27;s&#x27;)" />
    <span class="input-group-addon">,00</span>
</div>


<!-- Labelled -->
<label for="labelled">Jouw persoonlijke URL</label>
<div class="input-group ">
    <span class="input-group-addon" id="labelled_left-addon">https://example.com/users/</span>
    <input type="text" class="form-control" id="labelled" aria-describedby="labelled_left-addon" />
</div>


<!-- Sizinglarge -->
<div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizingLarge_left-addon">@</span>
    <input type="text" class="form-control" title="Gebruikersnaam" placeholder="Gebruikersnaam" aria-describedby="sizingLarge_left-addon" />
</div>


<!-- Sizingsmall -->
<div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizingSmall_left-addon">@</span>
    <input type="text" class="form-control" title="Gebruikersnaam" placeholder="Gebruikersnaam" aria-describedby="sizingSmall_left-addon" />
</div>


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


<!-- Radio -->
<div class="input-group ">
    <span class="input-group-addon">
      <input type="radio" aria-label="Selecteer veld"/>
    </span>
    <input type="text" class="form-control" aria-label="Vul naam in" placeholder="Gebruikersnaam" />
</div>


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


<!-- Left -->
{{#if label }}
  <label for="{{ id }}">{{ label }}</label>
{{/if}}
<div class="input-group {{ modifier }}">
  {{#if leftAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_left-addon"{{/unless}}>{{ leftAddon }}</span>
  {{/if}}
  <input type="text" class="form-control"
    {{#if label }}
      id="{{ id }}"
    {{else unless ariaLabel }}
      title="{{ placeholder }}"
    {{/if}}
    {{{ifattr 'placeholder' placeholder}}}
    {{#if ariaLabel }}
      aria-label="{{ ariaLabel }}"
    {{else}}
      aria-describedby="{{ id }}_{{#if rightAddon}}right-addon{{else}}left-addon{{/if}}"
    {{/if}}/>
  {{#if rightAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_right-addon"{{/unless}}>{{ rightAddon }}</span>
  {{/if}}
</div>

<!-- Right -->
{{#if label }}
  <label for="{{ id }}">{{ label }}</label>
{{/if}}
<div class="input-group {{ modifier }}">
  {{#if leftAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_left-addon"{{/unless}}>{{ leftAddon }}</span>
  {{/if}}
  <input type="text" class="form-control"
    {{#if label }}
      id="{{ id }}"
    {{else unless ariaLabel }}
      title="{{ placeholder }}"
    {{/if}}
    {{{ifattr 'placeholder' placeholder}}}
    {{#if ariaLabel }}
      aria-label="{{ ariaLabel }}"
    {{else}}
      aria-describedby="{{ id }}_{{#if rightAddon}}right-addon{{else}}left-addon{{/if}}"
    {{/if}}/>
  {{#if rightAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_right-addon"{{/unless}}>{{ rightAddon }}</span>
  {{/if}}
</div>

<!-- Double -->
{{#if label }}
  <label for="{{ id }}">{{ label }}</label>
{{/if}}
<div class="input-group {{ modifier }}">
  {{#if leftAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_left-addon"{{/unless}}>{{ leftAddon }}</span>
  {{/if}}
  <input type="text" class="form-control"
    {{#if label }}
      id="{{ id }}"
    {{else unless ariaLabel }}
      title="{{ placeholder }}"
    {{/if}}
    {{{ifattr 'placeholder' placeholder}}}
    {{#if ariaLabel }}
      aria-label="{{ ariaLabel }}"
    {{else}}
      aria-describedby="{{ id }}_{{#if rightAddon}}right-addon{{else}}left-addon{{/if}}"
    {{/if}}/>
  {{#if rightAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_right-addon"{{/unless}}>{{ rightAddon }}</span>
  {{/if}}
</div>

<!-- Labelled -->
{{#if label }}
  <label for="{{ id }}">{{ label }}</label>
{{/if}}
<div class="input-group {{ modifier }}">
  {{#if leftAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_left-addon"{{/unless}}>{{ leftAddon }}</span>
  {{/if}}
  <input type="text" class="form-control"
    {{#if label }}
      id="{{ id }}"
    {{else unless ariaLabel }}
      title="{{ placeholder }}"
    {{/if}}
    {{{ifattr 'placeholder' placeholder}}}
    {{#if ariaLabel }}
      aria-label="{{ ariaLabel }}"
    {{else}}
      aria-describedby="{{ id }}_{{#if rightAddon}}right-addon{{else}}left-addon{{/if}}"
    {{/if}}/>
  {{#if rightAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_right-addon"{{/unless}}>{{ rightAddon }}</span>
  {{/if}}
</div>

<!-- Sizinglarge -->
{{#if label }}
  <label for="{{ id }}">{{ label }}</label>
{{/if}}
<div class="input-group {{ modifier }}">
  {{#if leftAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_left-addon"{{/unless}}>{{ leftAddon }}</span>
  {{/if}}
  <input type="text" class="form-control"
    {{#if label }}
      id="{{ id }}"
    {{else unless ariaLabel }}
      title="{{ placeholder }}"
    {{/if}}
    {{{ifattr 'placeholder' placeholder}}}
    {{#if ariaLabel }}
      aria-label="{{ ariaLabel }}"
    {{else}}
      aria-describedby="{{ id }}_{{#if rightAddon}}right-addon{{else}}left-addon{{/if}}"
    {{/if}}/>
  {{#if rightAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_right-addon"{{/unless}}>{{ rightAddon }}</span>
  {{/if}}
</div>

<!-- Sizingsmall -->
{{#if label }}
  <label for="{{ id }}">{{ label }}</label>
{{/if}}
<div class="input-group {{ modifier }}">
  {{#if leftAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_left-addon"{{/unless}}>{{ leftAddon }}</span>
  {{/if}}
  <input type="text" class="form-control"
    {{#if label }}
      id="{{ id }}"
    {{else unless ariaLabel }}
      title="{{ placeholder }}"
    {{/if}}
    {{{ifattr 'placeholder' placeholder}}}
    {{#if ariaLabel }}
      aria-label="{{ ariaLabel }}"
    {{else}}
      aria-describedby="{{ id }}_{{#if rightAddon}}right-addon{{else}}left-addon{{/if}}"
    {{/if}}/>
  {{#if rightAddon }}
    <span class="input-group-addon" {{#unless ariaLabel }} id="{{ id }}_right-addon"{{/unless}}>{{ rightAddon }}</span>
  {{/if}}
</div>

<!-- Checkbox -->
<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>

<!-- Radio -->
<div class="input-group {{ modifier }}">
  {{#if radioLeft }}
    <span class="input-group-addon">
      <input type="radio" aria-label="{{ ariaLabelAddon }}"/>
    </span>
  {{/if}}
  <input type="text" class="form-control" aria-label="{{ ariaLabel }}" {{{ifattr 'placeholder' placeholder}}}/>
  {{#if radioRight }}
    <span class="input-group-addon">
      <input type="radio" aria-label="{{ ariaLabelAddon }}"/>
    </span>
  {{/if}}
</div>

<!-- Button -->
<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>
 
/* Left */
id: left
placeholder: Gebruikersnaam
leftAddon: '@'



/* Right */
id: right
placeholder: Gebruikersnaam van de ontvanger
rightAddon: '@rws.nl'



/* Double */
id: double
ariaLabel: Bedrag (afgerond in hele Euro's')
leftAddon: €
rightAddon: ',00'



/* Labelled */
id: labelled
label: Jouw persoonlijke URL
leftAddon: 'https://example.com/users/'



/* Sizinglarge */
id: sizingLarge
modifier: input-group-lg
leftAddon: '@'
placeholder: Gebruikersnaam



/* Sizingsmall */
id: sizingSmall
modifier: input-group-sm
leftAddon: '@'
placeholder: Gebruikersnaam



/* Checkbox */
id: checkbox
placeholder: Gebruikersnaam
checkboxLeft: true
ariaLabelAddon: Activeer veld
ariaLabel: Vul naam in



/* Radio */
id: radio
placeholder: Gebruikersnaam
radioLeft: true
ariaLabelAddon: Selecteer veld
ariaLabel: Vul naam in



/* Button */
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">