Text Area

Overview

Text areas allow for the collection of text input longer than a single line.


Default text area

You can also choose to include a label for your Text Area.

This is a example of hint text
<div class="field">
  <label class="label" for="textarea-1">Text Area Label</label>
  <div class="control">
    <textarea class="textarea" id="textarea-1"></textarea>
  </div>
</div>

<div class="field">
  <label class="label" for="textarea-2">Text Area Label</label>
  <span class="hint">This is a example of hint text</span>
  <div class="control">
    <textarea class="textarea" id="textarea-2"></textarea>
  </div>
</div>

When to use

Text Areas should be used:
  • When users are required to enter more than a line of text.
Text Areas should not be used for:
  • Complex or too many open-ended answers.
    • We recommend that you break your questions up into a series of simpler questions instead.
    • For example, consider using the checkbox component if you want users to give multiple answers from a predetermined set of options.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team