DSO Component Library

# Group Textarea: Input Textarea Placeholder

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <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" rows="5" placeholder="Bijvoorbeeld; vragen over de toolkit" required></textarea>
        </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>
      </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>
    </div>

`
`

    id: input-textarea-placeholder
    label: Wilt u nog wat kwijt?
    rows: 5
    __title: Placeholder
    placeholder: Bijvoorbeeld; vragen over de toolkit
    required: true

`

- Handle: @group-textarea--input-textarea-placeholder
- Variants (6): Default , Input Textarea Invalid , Input Textarea Valid , Input Textarea Placeholder , Input Textarea Disabled , Input Textarea Readonly
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\01-groups\group-textarea.hbs
- References (2): @error-block, @help-block

‘Attribuut `@rows` is optioneel’

### WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

`<label for="input-textarea" class="control-label"> Wilt u nog wat kwijt? </label>`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Group Textarea`

### NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

`<textarea class="form-control" id="input-textarea" rows="5"></textarea>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

`<form class="form-horizontal"> <!-- Start: @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" rows="5"></textarea> </div> </div> <!-- End: @group-textarea--default --><hr> <!-- Start: @group-textarea--input-textarea-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een textarea ongeldig is, dient er een <code>.so-invalid</code> class gezet te worden op de div met de class <code>.so-textarea</code>.</p> </div> <div class="dso-example"> <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" rows="5" 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> </div> <!-- End: @group-textarea--input-textarea-invalid --><hr> <!-- Start: @group-textarea--input-textarea-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een textarea ongeldig was en valide wordt gemaakt, dient de <code>.so-invalid</code> class vervangen te worden door de class <code>.so-valid</code>.</p> </div> <div class="dso-example"> <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" rows="5" 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> </div> <!-- End: @group-textarea--input-textarea-valid --><hr> <!-- Start: @group-textarea--input-textarea-placeholder --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Placeholder</h2> </div> <div class="dso-example"> <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" rows="5" placeholder="Bijvoorbeeld; vragen over de toolkit" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-placeholder --><hr> <!-- Start: @group-textarea--input-textarea-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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" rows="5" disabled="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-disabled --><hr> <!-- Start: @group-textarea--input-textarea-readonly --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Readonly</h2> </div> <div class="dso-example"> <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" rows="5" readonly="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-readonly --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

`<form class="form-horizontal"> <!-- Start: @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" rows="5"></textarea> </div> </div> <!-- End: @group-textarea--default --><hr> <!-- Start: @group-textarea--input-textarea-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een textarea ongeldig is, dient er een <code>.so-invalid</code> class gezet te worden op de div met de class <code>.so-textarea</code>.</p> </div> <div class="dso-example"> <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" rows="5" 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> </div> <!-- End: @group-textarea--input-textarea-invalid --><hr> <!-- Start: @group-textarea--input-textarea-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een textarea ongeldig was en valide wordt gemaakt, dient de <code>.so-invalid</code> class vervangen te worden door de class <code>.so-valid</code>.</p> </div> <div class="dso-example"> <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" rows="5" 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> </div> <!-- End: @group-textarea--input-textarea-valid --><hr> <!-- Start: @group-textarea--input-textarea-placeholder --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Placeholder</h2> </div> <div class="dso-example"> <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" rows="5" placeholder="Bijvoorbeeld; vragen over de toolkit" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-placeholder --><hr> <!-- Start: @group-textarea--input-textarea-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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" rows="5" disabled="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-disabled --><hr> <!-- Start: @group-textarea--input-textarea-readonly --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Readonly</h2> </div> <div class="dso-example"> <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" rows="5" readonly="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-readonly --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

`<form class="form-horizontal"> <!-- Start: @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" rows="5"></textarea> </div> </div> <!-- End: @group-textarea--default --><hr> <!-- Start: @group-textarea--input-textarea-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een textarea ongeldig is, dient er een <code>.so-invalid</code> class gezet te worden op de div met de class <code>.so-textarea</code>.</p> </div> <div class="dso-example"> <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" rows="5" 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> </div> <!-- End: @group-textarea--input-textarea-invalid --><hr> <!-- Start: @group-textarea--input-textarea-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een textarea ongeldig was en valide wordt gemaakt, dient de <code>.so-invalid</code> class vervangen te worden door de class <code>.so-valid</code>.</p> </div> <div class="dso-example"> <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" rows="5" 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> </div> <!-- End: @group-textarea--input-textarea-valid --><hr> <!-- Start: @group-textarea--input-textarea-placeholder --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Placeholder</h2> </div> <div class="dso-example"> <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" rows="5" placeholder="Bijvoorbeeld; vragen over de toolkit" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-placeholder --><hr> <!-- Start: @group-textarea--input-textarea-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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" rows="5" disabled="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-disabled --><hr> <!-- Start: @group-textarea--input-textarea-readonly --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Readonly</h2> </div> <div class="dso-example"> <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" rows="5" readonly="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-readonly --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

`<form class="form-horizontal"> <!-- Start: @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" rows="5"></textarea> </div> </div> <!-- End: @group-textarea--default --><hr> <!-- Start: @group-textarea--input-textarea-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een textarea ongeldig is, dient er een <code>.so-invalid</code> class gezet te worden op de div met de class <code>.so-textarea</code>.</p> </div> <div class="dso-example"> <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" rows="5" 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> </div> <!-- End: @group-textarea--input-textarea-invalid --><hr> <!-- Start: @group-textarea--input-textarea-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een textarea ongeldig was en valide wordt gemaakt, dient de <code>.so-invalid</code> class vervangen te worden door de class <code>.so-valid</code>.</p> </div> <div class="dso-example"> <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" rows="5" 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> </div> <!-- End: @group-textarea--input-textarea-valid --><hr> <!-- Start: @group-textarea--input-textarea-placeholder --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Placeholder</h2> </div> <div class="dso-example"> <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" rows="5" placeholder="Bijvoorbeeld; vragen over de toolkit" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-placeholder --><hr> <!-- Start: @group-textarea--input-textarea-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <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" rows="5" disabled="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-disabled --><hr> <!-- Start: @group-textarea--input-textarea-readonly --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Readonly</h2> </div> <div class="dso-example"> <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" rows="5" readonly="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-readonly --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`