DSO Toolkit | Component Library

Group Input: Input Text Placeholder 

<div class="form-group dso-input dso-input-text dso-required">
    <div class="dso-label-container">
        <label for="input-text-placeholder" class="control-label">
            Naam
        </label>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text-placeholder" class="form-control" placeholder="Voornaam Achternaam" required />
    </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-placeholder
type: text
label: Naam
__title: Placeholder
placeholder: Voornaam Achternaam
required: true

There are no notes for this item.