DSO Toolkit | Component Library

Group Textarea: 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>
 
<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-valid
label: Wilt u nog wat kwijt?
__title: Geldig
__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

‘Attribuut @rows is optioneel’