DSO Component Library

Horizontal Group Textarea 

<div class="form-group textarea">
    <label for="feedback" class="control-label">Hoe was uw overnachting?</label>
    <div class="field-container">
        <textarea class="form-control" id="feedback" rows="10"></textarea>
    </div>
</div>
 
<div class="form-group textarea">
  <label for="{{ id }}" class="control-label">{{ label }}</label>
  <div class="field-container">
    <textarea class="form-control" id="{{ id }}" {{{ifattr 'rows' rows }}}></textarea>
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
</div>
 
id: feedback
label: Hoe was uw overnachting?
rows: 10

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="feedback" class="control-label">Hoe was uw overnachting?</label>

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

Check that the title element describes the document.

<title>Default

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="feedback" rows="10"></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"> <div class="form-group textarea"> <label for="feedback" class="control-label">Hoe was uw overnachting?</label> <div class="field-container"> <textarea class="form-control" id="feedback" rows="10"></textarea> </div> </div> <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"> <div class="form-group textarea"> <label for="feedback" class="control-label">Hoe was uw overnachting?</label> <div class="field-container"> <textarea class="form-control" id="feedback" rows="10"></textarea> </div> </div> <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"> <div class="form-group textarea"> <label for="feedback" class="control-label">Hoe was uw overnachting?</label> <div class="field-container"> <textarea class="form-control" id="feedback" rows="10"></textarea> </div> </div> <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"> <div class="form-group textarea"> <label for="feedback" class="control-label">Hoe was uw overnachting?</label> <div class="field-container"> <textarea class="form-control" id="feedback" rows="10"></textarea> </div> </div> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>