DSO Toolkit homepage

Group Input

Component preview opent in nieuw tabblad

There are no notes for this item.

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

    </div>
    <div class="dso-field-container">

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

    </div>

</div>
<!-- Input Email -->
<div class="form-group dso-input dso-input-email">
    <div class="dso-label-container">
        <label for="input-email" class="control-label">
            Group input - type Email
        </label>

    </div>
    <div class="dso-field-container">

        <input type="email" id="input-email" class="form-control" value="pieter@">

    </div>

</div>
<!-- Input Date -->
<div class="form-group dso-input dso-input-date">
    <div class="dso-label-container">
        <label for="input-date" class="control-label">
            Group input - type Date
        </label>

    </div>
    <div class="dso-field-container">

        <dso-date-picker identifier="input-date" value="1970-07-03"></dso-date-picker>

    </div>

</div>
<!-- Input Date Invalid -->
<div class="form-group dso-input dso-input-date dso-invalid">
    <div class="dso-label-container">
        <label for="input-date" class="control-label">
            Group input - type Date - Invalid
        </label>

    </div>
    <div class="dso-field-container">

        <dso-date-picker identifier="input-date" value="1-1-1"></dso-date-picker>

        <p class="dso-message">Vul de datum in met de juiste notatie (dd-mm-jjjj).</p>

    </div>

</div>
<!-- Input Password -->
<div class="form-group dso-input dso-input-password">
    <div class="dso-label-container">
        <label for="input-password" class="control-label">
            Group input - type Password
        </label>

    </div>
    <div class="dso-field-container">

        <input type="password" id="input-password" class="form-control" value="Welkom01">

    </div>

</div>
<!-- Input Url -->
<div class="form-group dso-input dso-input-url">
    <div class="dso-label-container">
        <label for="input-url" class="control-label">
            Group input - type URL
        </label>

    </div>
    <div class="dso-field-container">

        <input type="url" id="input-url" class="form-control" value="https://www.aandeslagmetdeomgevingswet.nl">

    </div>

</div>
<!-- Input Tel -->
<div class="form-group dso-input dso-input-tel">
    <div class="dso-label-container">
        <label for="input-tel" class="control-label">
            Group input - type Tel
        </label>

    </div>
    <div class="dso-field-container">

        <input type="tel" id="input-tel" class="form-control" value="062451789">

    </div>

</div>
<!-- Input Text Invalid -->
<div class="form-group dso-input dso-input-email dso-invalid dso-required">
    <div class="dso-label-container">
        <label for="input-text-invalid" class="control-label">
            Group input - type Email - Invalid
        </label>

    </div>
    <div class="dso-field-container">

        <input type="email" id="input-text-invalid" class="form-control" required aria-invalid="true">

        <p class="dso-message">Vul dit veld in.</p>

        <p class="dso-help-block" id="helpTextId_input-text-invalid">Bijvoorbeeld: email@email.nl</p>

    </div>

</div>
<!-- Input Text Invalid Input -->
<div class="form-group dso-input dso-input-email dso-invalid dso-required">
    <div class="dso-label-container">
        <label for="input-text-invalid-input" class="control-label">
            Group input - type Email - Invalid (foutieve invoer)
        </label>

    </div>
    <div class="dso-field-container">

        <input type="email" id="input-text-invalid-input" class="form-control" value="thomas@" required aria-invalid="true">

        <p class="dso-message">Ongeldig e-mailadres ingevuld.</p>

        <p class="dso-help-block" id="helpTextId_input-text-invalid-input">Bijvoorbeeld: email@email.nl</p>

    </div>

</div>
<!-- Input Text Valid -->
<div class="form-group dso-input dso-input-email dso-valid dso-required">
    <div class="dso-label-container">
        <label for="input-text-valid" class="control-label">
            Group input - type Email - Valid
        </label>

    </div>
    <div class="dso-field-container">

        <input type="email" 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">
            Group input - type Text
        </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-email has-feedback">
    <div class="dso-label-container">
        <label for="input-text-icon" class="control-label">
            Group input - type Email
        </label>

    </div>
    <div class="dso-field-container">

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

        <span class="form-control-feedback" aria-hidden="true">
            <dso-icon icon="email"></dso-icon>
        </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">
            Group input - type Text - Disabled
        </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">
            Group input - type Text - Readonly
        </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-email">
    <div class="dso-label-container">
        <label for="input-text-infobutton" class="control-label">
            Group input - type Email
        </label>

        <button type="button" class="btn dso-info-button" aria-expanded="false">
            <span class="sr-only">Toelichting bij vraag</span>
        </button>

    </div>
    <div class="dso-field-container">

        <input type="email" id="input-text-infobutton" class="form-control" value="thomas@">

    </div>

</div>
<!-- Input Text Infobutton Open -->
<div class="form-group dso-input dso-input-email dso-required">
    <div class="dso-label-container">
        <label for="input-text-infobutton-open" class="control-label">
            Group input - type Email
        </label>

        <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
            <span class="sr-only">Toelichting bij vraag</span>
        </button>

        <div class="dso-info">

            <button type="button">
                <span class="sr-only">Sluiten</span>
            </button>

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "E-mailadres"</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="dso-field-container">

        <input type="email" 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>Toelichting bij vraag: "E-mailadres" [DEPRECATED]</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>
<!-- Input Text Infobutton Static -->
<div class="form-group dso-input dso-input-email dso-required">
    <div class="dso-label-container">
        <label for="input-text-infobutton-static" class="control-label">
            Group input - type Email
        </label>

        <div class="dso-info">

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "E-mailadres"</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="dso-field-container">

        <input type="email" id="input-text-infobutton-static" class="form-control" required>

    </div>

    <div class="dso-info">

        <button type="button">
            <span class="sr-only">Sluiten</span>
        </button>

        <div class="dso-rich-content">

        </div>
    </div>

</div>
{% set localId = generateLocalId(prefix, id) %}

<div {{ className('form-group dso-input', [type, 'dso-input-' + type], [inputIcon, 'has-feedback'], [state, 'dso-' + state], [required, 'dso-required']) }}>
  <div class="dso-label-container">
    <label for="{{ localId }}" class="control-label">
      {{ label }}
    </label>
    {% if infoText and not static %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText, static: static} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    {% if type == 'date' %}
      <dso-date-picker identifier="{{ localId }}" {{ attributes(
        [min, 'min', min],
        [max, 'max', max],
        [disabled, 'disabled'],
        [value, 'value', value]
      )}}></dso-date-picker>
    {% else %}
      <input type="{{ type }}" id="{{ localId }}" class="form-control"
        {% if placeholder %} placeholder="{{ placeholder }}"{% endif %}
        {% if size %} size="{{ size }}"{% endif %}
        {% if value %} value="{{ value }}"{% endif %}
        {% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}
        {% if disabled %} disabled{% endif %}
        {% if readonly %} readonly{% endif %}
        {% if required %} required{% endif %}
        {% if state == "invalid" %} aria-invalid="true"{% endif %}
      >
    {% endif %}
    {% if inputIcon %}
      <span class="form-control-feedback" aria-hidden="true"><dso-icon icon="{{ inputIcon }}"></dso-icon></span>
    {% endif %}
    {% if errorText %}
      {% render '@error-block', {errorText: errorText} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: localId} %}
    {% endif %}
  </div>
  {% if infoOpen %}
    {% render '@info', {infoText: infoTextDeprecated} %}
  {% endif %}
</div>
/* Default */
__title: default
id: input-text
type: text
label: Group input - type Text
/* Input Email */
__title: email
id: input-email
type: email
label: Group input - type Email
__explanation:
  - >-
    Er is een <code>type="email"</code> beschikbaar die helpt bij het
    automatisch valideren van een veld.
value: pieter@
/* Input Date */
__title: date
id: input-date
type: date
label: Group input - type Date
__explanation:
  - >-
    Voor een date picker maken we gebruik van een custom element en
    <strong>niet</strong> van <code>input type="date"</code>
value: '1970-07-03'
/* Input Date Invalid */
__title: date invalid
id: input-date
type: date
label: Group input - type Date - Invalid
__explanation:
  - >-
    Voor een date picker maken we gebruik van een custom element en
    <strong>niet</strong> van <code>input type="date"</code>
value: 1-1-1
state: invalid
errorText: Vul de datum in met de juiste notatie (dd-mm-jjjj).
/* Input Password */
__title: password
id: input-password
type: password
label: Group input - type Password
__explanation:
  - >-
    Er is een <code>type="password"</code> beschikbaar die het ingevoerde
    wachtwoord maskeert met bullets.
value: Welkom01
/* Input Url */
__title: url
id: input-url
type: url
label: Group input - type URL
__explanation:
  - >-
    Er is een <code>type="url"</code> beschikbaar. Afhankelijk van de
    browserondersteuning kan het url veld automatisch worden gevalideerd wanneer
    het wordt verzonden. Sommige smartphones herkennen het url type en voegen
    ".com" toe aan het toetsenbord om overeen te komen met de url-invoer..
value: https://www.aandeslagmetdeomgevingswet.nl
/* Input Tel */
__title: tel
id: input-tel
type: tel
label: Group input - type Tel
__explanation:
  - >-
    Er is een <code>type="tel"</code> beschikbaarvoor het bewerken van een regel
    met ÊÊn regel voor het invoeren van een telefoonnummer.
value: '062451789'
/* Input Text Invalid */
__title: invalid
id: input-text-invalid
type: email
label: Group input - type Email - Invalid
__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>.
required: true
ariaInvalid: true
helpText: 'Bijvoorbeeld: email@email.nl'
state: invalid
errorText: Vul dit veld in.
/* Input Text Invalid Input */
__title: invalid - Foutieve invoer
id: input-text-invalid-input
type: email
label: Group input - type Email - Invalid (foutieve invoer)
__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
ariaInvalid: true
helpText: 'Bijvoorbeeld: email@email.nl'
state: invalid
errorText: Ongeldig e-mailadres ingevuld.
/* Input Text Valid */
__title: valid
id: input-text-valid
type: email
label: Group input - type Email - Valid
__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 */
__title: placeholder
id: input-text-placeholder
type: text
label: Group input - type Text
placeholder: Voornaam Achternaam
required: true
/* Input Text Icon */
__title: Met icoon
id: input-text-icon
type: email
label: Group input - type Email
inputIcon: email
/* Input Text Disabled */
__title: disabled
id: input-text-disabled
type: text
label: Group input - type Text - Disabled
disabled: true
/* Input Text Readonly */
__title: readonly
id: input-text-readonly
type: text
label: Group input - type Text - Readonly
readonly: true
/* Input Text Infobutton */
__title: infobutton
id: input-text-infobutton
type: email
label: Group input - type Email
__explanation:
  - Toelichting ingeklapt
value: thomas@
infoOpen: false
infoButtonLabel: Toelichting bij vraag
infoText: |
  Closed

/* Input Text Infobutton Open */
__title: infobutton uitgeklapt
id: input-text-infobutton-open
type: email
label: Group input - type Email
__explanation:
  - Toelichting uitgeklapt
required: true
infoOpen: true
infoButtonLabel: Toelichting bij vraag
infoText: |
  <h4>Toelichting bij vraag: "E-mailadres"</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>
infoTextDeprecated: |
  <h4>Toelichting bij vraag: "E-mailadres" [DEPRECATED]</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>

/* Input Text Infobutton Static */
__title: infobutton uitgeklapt
id: input-text-infobutton-static
type: email
label: Group input - type Email
__explanation:
  - Vaste toelichting
required: true
infoOpen: true
infoText: |
  <h4>Toelichting bij vraag: "E-mailadres"</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>
static: true