DSO Component Library

Input Group: 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>
 
<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>
 
id: radio
placeholder: Gebruikersnaam
radioLeft: true
ariaLabelAddon: Selecteer 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">