DSO Toolkit | Component Library

Group Input 

<!-- Default -->
<div class="form-group dso-input dso-input-text">
    <div class="dso-label-container">
        <label for="input-text" class="control-label">
            Tekstveld
        </label>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text" class="form-control" />
    </div>
</div>


<!-- 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>


<!-- 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>


<!-- 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>


<!-- 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>


<!-- Input Text Disabled -->
<div class="form-group dso-input dso-input-text">
    <div class="dso-label-container">
        <label for="input-text-disabled" class="control-label">
            Naam
        </label>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text-disabled" class="form-control" disabled />
    </div>
</div>


<!-- Input Text Readonly -->
<div class="form-group dso-input dso-input-text">
    <div class="dso-label-container">
        <label for="input-text-readonly" class="control-label">
            Naam
        </label>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text-readonly" class="form-control" readonly />
    </div>
</div>


<!-- 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>


<!-- Input Text Infobutton Open -->
<div class="form-group dso-input dso-input-text dso-required">
    <div class="dso-label-container">
        <label for="input-text-infobutton-open" class="control-label">
            E-mailadres
        </label>
        <button type="button" class="btn dso-info-button dso-open">
            <span class="sr-only">
                Toelichting
            </span>
        </button>
    </div>
    <div class="dso-field-container">
        <input type="text" id="input-text-infobutton-open" class="form-control" required />
    </div>
    <div class="dso-info">
        <button type="button">
            <span class="sr-only">Sluiten</span>
        </button>
        <div class="dso-rich-content">
            <h4>Heading 4</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
            </p>

        </div>
    </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>
 
/* Default */
id: input-text
type: text
label: Tekstveld



/* Input Text Invalid */
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



/* Input Text Valid */
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'



/* Input Text Placeholder */
id: input-text-placeholder
type: text
label: Naam
__title: Placeholder
placeholder: Voornaam Achternaam
required: true



/* Input Text Icon */
id: input-text-icon
type: text
label: E-mailadres
__title: Met icoon
inputIcon: at



/* Input Text Disabled */
id: input-text-disabled
type: text
label: Naam
__title: Disabled
disabled: true



/* Input Text Readonly */
id: input-text-readonly
type: text
label: Naam
__title: Readonly
readonly: true



/* Input Text Infobutton */
id: input-text-infobutton
type: text
label: E-mailadres
__title: Infobutton
__explanation:
  - Toelichting ingeklapt
value: thomas@
infoOpen: null
infoText: |
  Closed



/* Input Text Infobutton Open */
id: input-text-infobutton-open
type: text
label: E-mailadres
__title: Infobutton uitgeklapt
__explanation:
  - Toelichting uitgeklapt
required: true
infoOpen: true
infoText: |
  <h4>Heading 4</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>

There are no notes for this item.