DSO Component Library

# Input Group

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <!-- 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}}} />
      {{#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

`

- Handle: @input-group
- Variants (9): Left , Right , Double , Labelled , Sizinglarge , Sizingsmall , Checkbox , Radio , Button
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\10-misc\input-group\input-group.hbs

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