DSO 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-field-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-field-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 }}
      {{> '@form-field-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 }}
    {{> '@form-field-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’

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h4 element appears to be the primary document heading, so should be an h1 element.

<h4>Heading 4</h4>

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"></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"></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>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-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" 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>.dso-invalid</code> class vervangen te worden door de class <code>.dso-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" 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-rows6 --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Een textarea met 6 rijen</h2> <p>Een textarea zonder <code>rows</code> attribuut krijgt een standaard hoogte. De implementator kan met <code>rows</code> de hoogte van de textarea sturen</p> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-textarea--input-textarea-rows6 --><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" 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" 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" readonly="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-readonly --><hr> <!-- Start: @group-textarea--input-textarea-infobutton-open --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton uitgeklapt</h2> <p>Toelichting uitgeklapt</p> </div> <div class="dso-example"> <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-field-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-field-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> </div> <!-- End: @group-textarea--input-textarea-infobutton-open --><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"></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>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-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" 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>.dso-invalid</code> class vervangen te worden door de class <code>.dso-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" 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-rows6 --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Een textarea met 6 rijen</h2> <p>Een textarea zonder <code>rows</code> attribuut krijgt een standaard hoogte. De implementator kan met <code>rows</code> de hoogte van de textarea sturen</p> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-textarea--input-textarea-rows6 --><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" 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" 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" readonly="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-readonly --><hr> <!-- Start: @group-textarea--input-textarea-infobutton-open --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton uitgeklapt</h2> <p>Toelichting uitgeklapt</p> </div> <div class="dso-example"> <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-field-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-field-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> </div> <!-- End: @group-textarea--input-textarea-infobutton-open --><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"></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>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-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" 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>.dso-invalid</code> class vervangen te worden door de class <code>.dso-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" 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-rows6 --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Een textarea met 6 rijen</h2> <p>Een textarea zonder <code>rows</code> attribuut krijgt een standaard hoogte. De implementator kan met <code>rows</code> de hoogte van de textarea sturen</p> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-textarea--input-textarea-rows6 --><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" 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" 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" readonly="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-readonly --><hr> <!-- Start: @group-textarea--input-textarea-infobutton-open --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton uitgeklapt</h2> <p>Toelichting uitgeklapt</p> </div> <div class="dso-example"> <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-field-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-field-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> </div> <!-- End: @group-textarea--input-textarea-infobutton-open --><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"></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>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-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" 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>.dso-invalid</code> class vervangen te worden door de class <code>.dso-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" 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-rows6 --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Een textarea met 6 rijen</h2> <p>Een textarea zonder <code>rows</code> attribuut krijgt een standaard hoogte. De implementator kan met <code>rows</code> de hoogte van de textarea sturen</p> </div> <div class="dso-example"> <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> </div> </div> <!-- End: @group-textarea--input-textarea-rows6 --><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" 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" 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" readonly="" required=""></textarea> </div> </div> </div> </div> <!-- End: @group-textarea--input-textarea-readonly --><hr> <!-- Start: @group-textarea--input-textarea-infobutton-open --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton uitgeklapt</h2> <p>Toelichting uitgeklapt</p> </div> <div class="dso-example"> <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-field-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-field-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> </div> <!-- End: @group-textarea--input-textarea-infobutton-open --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>