DSO Component Library

Input Group: 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>
 
{{#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: labelled
label: Jouw persoonlijke URL
leftAddon: 'https://example.com/users/'

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.