SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information


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 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>

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.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component