Textarea

Component preview opent in nieuw tabblad

β€˜Attribuut @rows is optioneel’

<!-- Default -->
<div class="form-group dso-textarea">
    <div class="dso-label-container">
        <label for="input-textarea" class="control-label">
            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">
            Textarea - Invalid
        </label>

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

        <p class="dso-message" id="errorTextId_input-textarea-invalid">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">
            Textarea - Valid
        </label>

    </div>
    <div class="dso-field-container">
        <textarea class="form-control" id="input-textarea-valid" aria-describedby="helpTextId_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">
            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">
            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">
            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">
            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">
            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>
<!-- Input Textarea Static Info -->
<div class="form-group dso-textarea dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-static-info" class="control-label">
            Textarea - Default
        </label>

        <div class="dso-info" id="infoTextId_input-textarea-static-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-static-info" aria-describedby="infoTextId_input-textarea-static-info" required></textarea>

    </div>
</div>
<!-- Input Textarea Allmessages -->
<div class="form-group dso-textarea dso-invalid dso-required">
    <div class="dso-label-container">
        <label for="input-textarea-allmessages" class="control-label">
            Textarea - Alle meldingen
        </label>

        <div class="dso-info" id="infoTextId_input-textarea-allmessages">

            <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-allmessages" aria-describedby="errorTextId_input-textarea-allmessages helpTextId_input-textarea-allmessages infoTextId_input-textarea-allmessages" required aria-invalid="true"></textarea>

        <p class="dso-message" id="errorTextId_input-textarea-allmessages">Vul dit veld in.</p>

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

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

{% set infoTextId = 'infoTextId_' + localId %}
{% set helpTextId = 'helpTextId_' + localId %}
{% set errorTextId = 'errorTextId_' + localId %}

{% if errorText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + errorTextId %}
{% endif %}
{% if helpText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + helpTextId %}
{% endif %}
{% if infoText and static %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + infoTextId %}
{% endif %}

<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, id: infoTextId} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    <textarea class="form-control" id="{{ localId }}"
      {{ attributes([ariaDescribedBy, 'aria-describedby', ariaDescribedBy]) }}
      {% 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, id: errorTextId} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: helpTextId} %}
    {% endif %}
  </div>
</div>
/* Default */
__title: default
id: input-textarea
label: Textarea - Default
/* Input Textarea Invalid */
__title: invalid
id: input-textarea-invalid
label: 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: 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: 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: Textarea - Default
placeholder: Bijvoorbeeld; vragen over de toolkit
required: true
/* Input Textarea Disabled */
__title: disabled
id: input-textarea-disabled
label: Textarea - Disabled
required: true
disabled: true
/* Input Textarea Readonly */
__title: readonly
id: input-textarea-readonly
label: Textarea - Readonly
required: true
readonly: true
/* Input Textarea Infobutton Open */
__title: Toelichting uitgeklapt
id: input-textarea-infobutton-open
label: Textarea - Default
__explanation:
  - Toelichting uitgeklapt door infobutton
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>
/* Input Textarea Static Info */
__title: vaste toelichting
id: input-textarea-static-info
label: Textarea - Default
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
/* Input Textarea Allmessages */
__title: Alle meldingen
id: input-textarea-allmessages
label: Textarea - Alle meldingen
__explanation: >-
  Naar de meldingen wordt verwezen met een <code>aria-describedby</code>
  attribuut vanuit de <code>textarea</code>.
required: true
state: invalid
errorText: Vul dit veld in.
helpText: Vul een geldige tekst in
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