DSO 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="fas fa-at form-control-feedback" aria-hidden="true"></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>


<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>
  </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="{{ inputIcon }} form-control-feedback" aria-hidden="true"></span>
    {{/if}}
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
</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: fas fa-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

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<label for="input-text" class="control-label"> Tekstveld </label>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Group Input

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<input type="text" id="input-text" class="form-control">

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<form class="form-horizontal"> <!-- Start: @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> <!-- End: @group-input--default --><hr> <!-- Start: @group-input--input-text-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-invalid --><hr> <!-- Start: @group-input--input-text-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-valid --><hr> <!-- Start: @group-input--input-text-placeholder --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Placeholder</h2> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-placeholder --><hr> <!-- Start: @group-input--input-text-icon --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Met icoon</h2> </div> <div class="dso-example"> <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="fas fa-at form-control-feedback" aria-hidden="true"></span> </div> </div> </div> </div> <!-- End: @group-input--input-text-icon --><hr> <!-- Start: @group-input--input-text-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-input--input-text-disabled --><hr> <!-- Start: @group-input--input-text-readonly --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Readonly</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-input--input-text-readonly --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<form class="form-horizontal"> <!-- Start: @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> <!-- End: @group-input--default --><hr> <!-- Start: @group-input--input-text-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-invalid --><hr> <!-- Start: @group-input--input-text-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-valid --><hr> <!-- Start: @group-input--input-text-placeholder --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Placeholder</h2> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-placeholder --><hr> <!-- Start: @group-input--input-text-icon --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Met icoon</h2> </div> <div class="dso-example"> <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="fas fa-at form-control-feedback" aria-hidden="true"></span> </div> </div> </div> </div> <!-- End: @group-input--input-text-icon --><hr> <!-- Start: @group-input--input-text-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-input--input-text-disabled --><hr> <!-- Start: @group-input--input-text-readonly --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Readonly</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-input--input-text-readonly --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<form class="form-horizontal"> <!-- Start: @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> <!-- End: @group-input--default --><hr> <!-- Start: @group-input--input-text-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-invalid --><hr> <!-- Start: @group-input--input-text-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-valid --><hr> <!-- Start: @group-input--input-text-placeholder --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Placeholder</h2> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-placeholder --><hr> <!-- Start: @group-input--input-text-icon --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Met icoon</h2> </div> <div class="dso-example"> <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="fas fa-at form-control-feedback" aria-hidden="true"></span> </div> </div> </div> </div> <!-- End: @group-input--input-text-icon --><hr> <!-- Start: @group-input--input-text-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-input--input-text-disabled --><hr> <!-- Start: @group-input--input-text-readonly --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Readonly</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-input--input-text-readonly --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<form class="form-horizontal"> <!-- Start: @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> <!-- End: @group-input--default --><hr> <!-- Start: @group-input--input-text-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-invalid --><hr> <!-- Start: @group-input--input-text-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-valid --><hr> <!-- Start: @group-input--input-text-placeholder --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Placeholder</h2> </div> <div class="dso-example"> <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> </div> <!-- End: @group-input--input-text-placeholder --><hr> <!-- Start: @group-input--input-text-icon --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Met icoon</h2> </div> <div class="dso-example"> <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="fas fa-at form-control-feedback" aria-hidden="true"></span> </div> </div> </div> </div> <!-- End: @group-input--input-text-icon --><hr> <!-- Start: @group-input--input-text-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-input--input-text-disabled --><hr> <!-- Start: @group-input--input-text-readonly --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Readonly</h2> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-input--input-text-readonly --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>