Group Textarea

Component preview

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

    </div>
    <div class="dso-field-container">
        <textarea class="form-control" id="input-textarea"></textarea>

    </div>

</div>

<!-- Input Textarea Invalid -->
<div class="form-group dso-textarea dso-invalid dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-invalid" class="control-label">
            Group textarea - Invalid
        </label>

    </div>
    <div class="dso-field-container">
        <textarea class="form-control" id="input-textarea-invalid" required aria-invalid="true"></textarea>

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

        <p class="dso-help-block" id="helpTextId_input-textarea-invalid">Vul een geldige tekst in</p>

    </div>

</div>

<!-- Input Textarea Valid -->
<div class="form-group dso-textarea dso-valid dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-valid" class="control-label">
            Group textarea - Valid
        </label>

    </div>
    <div class="dso-field-container">
        <textarea class="form-control" id="input-textarea-valid" required>Ik heb wat ingevuld</textarea>

        <p class="dso-help-block" id="helpTextId_input-textarea-valid">Minimaal 6 tekens waarvan 1 leesteken</p>

    </div>

</div>

<!-- Input Textarea Rows 6 -->
<div class="form-group dso-textarea">
    <div class="dso-label-container">
        <label for="input-textarea-rows6" class="control-label">
            Group textarea - Default
        </label>

    </div>
    <div class="dso-field-container">
        <textarea class="form-control" id="input-textarea-rows6" rows="6"></textarea>

    </div>

</div>

<!-- Input Textarea Placeholder -->
<div class="form-group dso-textarea dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-placeholder" class="control-label">
            Group textarea - Default
        </label>

    </div>
    <div class="dso-field-container">
        <textarea class="form-control" id="input-textarea-placeholder" placeholder="Bijvoorbeeld; vragen over de toolkit" required></textarea>

    </div>

</div>

<!-- Input Textarea Disabled -->
<div class="form-group dso-textarea dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-disabled" class="control-label">
            Group textarea - Disabled
        </label>

    </div>
    <div class="dso-field-container">
        <textarea class="form-control" id="input-textarea-disabled" disabled required></textarea>

    </div>

</div>

<!-- Input Textarea Readonly -->
<div class="form-group dso-textarea dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-readonly" class="control-label">
            Group textarea - Readonly
        </label>

    </div>
    <div class="dso-field-container">
        <textarea class="form-control" id="input-textarea-readonly" readonly required></textarea>

    </div>

</div>

<!-- Input Textarea Infobutton Open -->
<div class="form-group dso-textarea dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-infobutton-open" class="control-label">
            Group textarea - Default
        </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: "Wilt u nog wat kwijt?"</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">
        <textarea class="form-control" id="input-textarea-infobutton-open" required></textarea>

    </div>

    <div class="dso-info">

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

        <div class="dso-rich-content">
            <h4>Toelichting bij vraag: "Wilt u nog wat kwijt?" [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 Textarea Infobutton Static -->
<div class="form-group dso-textarea dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-infobutton-static" class="control-label">
            Group textarea - Default
        </label>

        <div class="dso-info">

            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Wilt u nog wat kwijt?"</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">
        <textarea class="form-control" id="input-textarea-infobutton-static" required></textarea>

    </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-textarea', [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">
    <textarea class="form-control" id="{{ localId }}"
      {% if placeholder %} placeholder="{{ placeholder }}"{% endif %}
      {% if rows %} rows="{{ rows }}"{% endif %}
      {% if disabled %} disabled{% endif %}
      {% if readonly %} readonly{% endif %}
      {% if required %} required{% endif %}
      {% if state == "invalid" %} aria-invalid="true"{% endif %}
    >{{ value }}</textarea>
    {% 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-textarea
label: Group textarea - Default

/* Input Textarea Invalid */
__title: invalid
id: input-textarea-invalid
label: Group textarea - Invalid
__explanation:
  - >-
    Indien een textarea ongeldig is, dient er een <code>.dso-invalid</code>
    class gezet te worden op de div met de class <code>.dso-textarea</code>.
required: true
helpText: Vul een geldige tekst in
state: invalid
errorText: Vul dit veld in.

/* Input Textarea Valid */
__title: valid
id: input-textarea-valid
label: Group textarea - Valid
__explanation:
  - >-
    Indien een textarea ongeldig was en valide wordt gemaakt, dient de
    <code>.dso-invalid</code> class vervangen te worden door de class
    <code>.dso-valid</code>.
required: true
state: valid
helpText: Minimaal 6 tekens waarvan 1 leesteken
value: Ik heb wat ingevuld

/* Input Textarea Rows 6 */
__title: een textarea met 6 rijen
id: input-textarea-rows6
label: Group textarea - Default
__explanation: >-
  Een textarea zonder <code>rows</code> attribuut krijgt een standaard hoogte.
  De implementator kan met <code>rows</code> de hoogte van de textarea sturen
rows: 6

/* Input Textarea Placeholder */
__title: placeholder
id: input-textarea-placeholder
label: Group textarea - Default
placeholder: Bijvoorbeeld; vragen over de toolkit
required: true

/* Input Textarea Disabled */
__title: disabled
id: input-textarea-disabled
label: Group textarea - Disabled
required: true
disabled: true

/* Input Textarea Readonly */
__title: readonly
id: input-textarea-readonly
label: Group textarea - Readonly
required: true
readonly: true

/* Input Textarea Infobutton Open */
__title: infobutton uitgeklapt
id: input-textarea-infobutton-open
label: Group textarea - Default
__explanation:
  - Toelichting uitgeklapt
required: true
infoOpen: true
infoButtonLabel: Toelichting bij vraag
infoText: |
  <h4>Toelichting bij vraag: "Wilt u nog wat kwijt?"</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: "Wilt u nog wat kwijt?" [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 Textarea Infobutton Static */
__title: vaste toelichting
id: input-textarea-infobutton-static
label: Group textarea - Default
__explanation:
  - Vaste toelichting
required: true
infoOpen: true
infoText: |
  <h4>Toelichting bij vraag: "Wilt u nog wat kwijt?"</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