Text Area

A multi-line text field for longer writing — a message, a description, a note — with an optional character counter and a handle to make it taller.

Preview

When to use

• For anything more than a line: comments, bios, feedback.
• With a counter when there is a length limit, so people see it before they hit it.

Reach for something else

• For a short single value: that is an Input.

Anatomy

1. 1

   Label

   Above the field.

2. 2

   Field

   A bordered box a few lines tall, scrolling past its height.

3. 3

   Resize handle

   Bottom corner; drags the height, not the width.

4. 4

   Counter

   Characters used out of the limit, under the field on the right.

5. 5

   Hint

   Optional help or error on the left, opposite the counter.

States

Accessibility

• A native <textarea> with a <label>.
• The counter is linked with aria-describedby, and announced politely rather than on every keystroke.
• Over the limit sets aria-invalid, and the hint says by how much.

Source

The Text Area is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.

See it in a block