Group Textarea
‘Attribuut @rows is optioneel’
<!-- Default -->
<div class="form-group dso-textarea">
<div class="dso-label-container">
<label for="input-textarea" class="control-label">
Wilt u nog wat kwijt?
</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">
Wilt u nog wat kwijt?
</label>
</div>
<div class="dso-field-container">
<textarea class="form-control" id="input-textarea-invalid" required></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">
Wilt u nog wat kwijt?
</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">
Wilt u nog wat kwijt?
</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">
Wilt u nog wat kwijt?
</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">
Wilt u nog wat kwijt?
</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">
Wilt u nog wat kwijt?
</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">
Wilt u nog wat kwijt?
</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?" - BINNENKORT 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>
{% 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 %}
{% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
{% endif %}
{% if infoOpen %}
{% render '@info', {infoText: infoText} %}
{% 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 %}
>{{ 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: Wilt u nog wat kwijt?
/* Input Textarea Invalid */
__title: Ongeldig
id: input-textarea-invalid
label: Wilt u nog wat kwijt?
__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: Geldig
id: input-textarea-valid
label: Wilt u nog wat kwijt?
__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: Wilt u nog wat kwijt?
__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: Wilt u nog wat kwijt?
placeholder: Bijvoorbeeld; vragen over de toolkit
required: true
/* Input Textarea Disabled */
__title: Disabled
id: input-textarea-disabled
label: Wilt u nog wat kwijt?
required: true
disabled: true
/* Input Textarea Readonly */
__title: Readonly
id: input-textarea-readonly
label: Wilt u nog wat kwijt?
required: true
readonly: true
/* Input Textarea Infobutton Open */
__title: Infobutton uitgeklapt
id: input-textarea-infobutton-open
label: Wilt u nog wat kwijt?
__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?" - BINNENKORT
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>