Back to the pattern library

Textarea

Use large text areas with caution. Many users find it hard to type, do not like to type or worry about articulating themselves. Large text areas can be daunting and discouraging.

If you have reason to use them, research them using mobile devices. Entering information using touch devices can be especially time-consuming.

More detailed information on how to use form patterns can be found in our design guidance.

Example

Example

HTML

<label for="feedback">Tell us what you liked or what we can improve</label>
<textarea id="feedback" cols="30" rows="4"></textarea>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

Text areas:

  • have a 1px solid border in #6E6E6E
  • have a 1px solid border in #00A1CC when focussed
  • are padded top and bottom 12px and left and right 8px
  • user entered test is 20px Avenir regular in #282828

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change