DSO Toolkit | Component Library

Group Input: Input Text Icon 

<div class="form-group dso-input dso-input-text has-feedback">
    <div class="dso-label-container">
        <label for="input-text-icon" class="control-label">
            E-mailadres
        </label>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text-icon" class="form-control" />
        <span class="form-control-feedback" aria-hidden="true">
            <svg class="di di-at">
                <use href="../../dso-icons.svg#at" />
            </svg> </span>
    </div>
</div>
 
<div class="form-group dso-input dso-input-{{ type }}{{#if inputIcon}} has-feedback{{/if}}{{#if state}} dso-{{ state }}{{/if}}{{#if required }} dso-required{{/if}}">
  <div class="dso-label-container">
    <label for="{{ id }}" class="control-label">
      {{ label }}
    </label>
    {{#if infoText }}
      {{> '@info-button' }}
    {{/if}}
  </div>
  <div class="dso-field-container">
    <input type="{{ type }}" id="{{ id }}" class="form-control"
      {{{ifattr 'placeholder' placeholder }}}
      {{{ifattr 'size' size }}}
      {{{ifattr 'value' value }}}
      {{{ifattr 'disabled' disabled }}}
      {{{ifattr 'readonly' readonly }}}
      {{{ifattr 'required' required }}}
    />
    {{#if inputIcon }}
      <span class="form-control-feedback" aria-hidden="true">
        {{> '@icon' icon=inputIcon }}
      </span>
    {{/if}}
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
  {{#if infoOpen }}
    {{> '@info' }}
  {{/if}}
</div>
 
id: input-text-icon
type: text
label: E-mailadres
__title: Met icoon
inputIcon: at

There are no notes for this item.