DSO Toolkit | Component Library

Group Input: Input Text Valid 

<div class="form-group dso-input dso-input-text dso-valid dso-required">
    <div class="dso-label-container">
        <label for="input-text-valid" class="control-label">
            E-mailadres
        </label>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text-valid" class="form-control" value="thomas@infoprojects.nl" required />
        <p class="dso-help-block" id="helpTextId_input-text-valid">Bijvoorbeeld: email@email.nl</p>
    </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-valid
type: text
label: E-mailadres
__title: Geldig
__explanation:
  - >-
    Indien een input ongeldig was en valide wordt gemaakt, dient de
    <code>.dso-invalid</code> class vervangen te worden door de class
    <code>.dso-valid</code>.
value: thomas@infoprojects.nl
required: true
state: valid
helpText: 'Bijvoorbeeld: email@email.nl'

There are no notes for this item.