DSO Toolkit | Component Library

Group Textarea: 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">Dit is geen geldige tekst</p>
        <p class="dso-help-block" id="helpTextId_input-textarea-invalid">Vul een geldige tekst in</p>
    </div>
</div>
 
<div class="form-group dso-textarea{{#if state}} dso-{{ state }}{{/if}}{{#if required }} dso-required{{/if}}">
  <div class="dso-label-container">
    <label for="{{ id }}" class="control-label">
      {{ label }}
    </label>
    {{#if infoText }}
      {{> '@info-button' }}
    {{/if}}
  </div>
  <div class="dso-field-container">
    <textarea class="form-control" id="{{ id }}"
      {{{ifattr 'rows' rows }}}
      {{{ifattr 'placeholder' placeholder}}}
      {{{ifattr 'disabled' disabled }}}
      {{{ifattr 'readonly' readonly }}}
      {{{ifattr 'required' required }}}>{{ value }}</textarea>
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
  {{#if infoOpen }}
    {{> '@info' }}
  {{/if}}
</div>
 
id: input-textarea-invalid
label: Wilt u nog wat kwijt?
__title: Ongeldig
__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: Dit is geen geldige tekst

‘Attribuut @rows is optioneel’