DSO Toolkit | Component Library

Group Textarea 

<!-- 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">Dit is geen geldige tekst</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">
            <span class="sr-only">
                Toelichting
            </span>
        </button>
    </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>Heading 4</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="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>
 
/* Default */
id: input-textarea
label: Wilt u nog wat kwijt?



/* Input Textarea Invalid */
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



/* Input Textarea Valid */
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



/* Input Textarea Rows 6 */
id: input-textarea-rows6
label: Wilt u nog wat kwijt?
__title: Een textarea met 6 rijen
__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 */
id: input-textarea-placeholder
label: Wilt u nog wat kwijt?
__title: Placeholder
placeholder: Bijvoorbeeld; vragen over de toolkit
required: true



/* Input Textarea Disabled */
id: input-textarea-disabled
label: Wilt u nog wat kwijt?
__title: Disabled
required: true
disabled: true



/* Input Textarea Readonly */
id: input-textarea-readonly
label: Wilt u nog wat kwijt?
__title: Readonly
required: true
readonly: true



/* Input Textarea Infobutton Open */
id: input-textarea-infobutton-open
label: Wilt u nog wat kwijt?
__title: Infobutton uitgeklapt
__explanation:
  - Toelichting uitgeklapt
required: true
infoOpen: true
infoText: |
  <h4>Heading 4</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>

‘Attribuut @rows is optioneel’