DSO Toolkit | Component Library

Group Input: Input Text Invalid 

<div class="form-group dso-input dso-input-text dso-invalid dso-required">
    <div class="dso-label-container">
        <label for="input-text-invalid" class="control-label">
            E-mailadres
        </label>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text-invalid" class="form-control" value="thomas@" required />
        <p class="dso-message">Ongeldig e-mailadres ingevuld</p>
        <p class="dso-help-block" id="helpTextId_input-text-invalid">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-invalid
type: text
label: E-mailadres
__title: Ongeldig
__explanation:
  - >-
    Indien een input ongeldig is, dient er een <code>.dso-invalid</code> class
    gezet te worden op de div met de class <code>.dso-input</code>.
value: thomas@
required: true
helpText: 'Bijvoorbeeld: email@email.nl'
state: invalid
errorText: Ongeldig e-mailadres ingevuld

There are no notes for this item.