DSO Component Library

# Input Group: Right

WIP

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

`

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

`
`

    {{#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>

`
`

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

`

- Handle: @input-group--right
- 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">`