Form

Textarea input

Published on

Description

The textarea provides a multi-line text input for longer content such as messages, descriptions, or comments.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="textarea">
      <hgroup>
        <h1>Textarea</h1>
      </hgroup>
    </label> <span id="textarea-hint">hint</span> <textarea id="textarea" dir="auto" name="textarea" aria-describedby="textarea-hint"></textarea></div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-textarea" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association.
  • Inherit typography: font: inherit; letter-spacing: inherit; word-spacing: inherit; for WCAG 1.4.12 compliance.
  • Do not use readonly — screen reader support is inconsistent.
  • Communicate character limits via hint text using aria-describedby.

References

Variables

None for input