DSO Toolkit | Component Library

Group Input: Input Text Infobutton 

<div class="form-group dso-input dso-input-text">
    <div class="dso-label-container">
        <label for="input-text-infobutton" class="control-label">
            E-mailadres
        </label>
        <button type="button" class="btn dso-info-button">
            <span class="sr-only">
                Toelichting
            </span>
        </button>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text-infobutton" class="form-control" value="thomas@" />
    </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-infobutton
type: text
label: E-mailadres
__title: Infobutton
__explanation:
  - Toelichting ingeklapt
value: thomas@
infoOpen: null
infoText: |
  Closed

There are no notes for this item.