Textarea

A textarea is an interactive element that allows users to input and display multiple lines of text within a user interface.

Overview

The purpose of textareas is to provide users with a larger input space for writing and editing text that requires more than one line. They offer a more user-friendly and efficient way to input and view longer pieces of textual information within a single user interface element.

Textareas differ from text inputs as they allow for multiline input, where users can freely type or paste more extensive content. They are commonly used in forms, text editors, messaging interfaces and any scenario where users need to input or view longer blocks of text.

Textarea with 'Add note' label and character count.

Dos and Don’ts

Use when the user needs to input a longer unique information that cannot be predicted with a preset list of options.

Don't

Don’t use if it is likely that the input will not exceed one line, if this is the case use a text input instead.

Anatomy

Form label (optional): The form label provides necessary content / information to the form.
String: Placeholder or user inputted value.
Resize tab (optional): Allows the user to manually resize the form container.
Assistive text (optional): The assistive text provides additional instructional information / error / success messaging.

Variations

Default

Modifiers

Type

Placeholder

Placeholder text should not contain crucial information, and should only be displayed if beneficial to the user.

Filled

Placeholder text within the input field disappears after the user begins entering data into the input.

Textarea component with a label and string content inside it.

Height

The height, unlike the width, of a textarea is flexible, with two different options available.

Auto-resize

Used when the intended behaviour is for the form's height to dynamically adjust based on input length.

Textarea component with auto-resizing option.

Manual-resize

Used when the intended behaviour is for the user to have control over the form’s height.

Textarea component with manual-resizing option.

Sizes

Use a consistent height when it is being used alongside other form components on the same page.

Small

Use when there isn’t enough vertical space for the default textarea size.

Medium

Default size and should always be used wherever it is practically possible.

Large

Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a textarea is placed by itself on a page.

Auto-resize

Textarea size	Default height	Minimum height	Maximum height
Large	80px	80px	176px
Medium	72px	72px	168px
Small	64px	64px	160px

Manual-resize

Textarea size	Default height [Desktop]	Minimum height [Desktop]	Maximum height [Desktop]	Fixed height [Mobile]
Large	80px	56px	N/A	176px
Medium	72px	48px	N/A	168px
Small	64px	40px	N/A	160px

Content

Placeholder

Use clear placeholder text so that users understand the purpose of the textarea.

Input types

Alphanumeric

Both letters, numbers and certain special characters are allowed, for the majority of use-cases this will be used.

Behaviours

Form inputs

When typing into a textarea and reaching the end of the field, the cursor should remain as static in the bottom right corner (for left-to-right languages) while text above it overflows through the top of the field. When the field loses focus, text should overflow through the bottom of the text area, showing the beginning of the text.

Auto-resize

A large-sized textarea component with auto-resize functionality is focused and has text inside it.

Manual-resize

A large-sized textarea component with manual-resize functionality is focused and has text inside it.

Character counter

The character limit and counter is used to let users know how long their entry can be before they begin typing.

A textarea component with a label and text inside it. The character counter at the top right shows 93 out of 50 characters. At the bottom, assistive text in an error state indicates that the character limit has been exceeded by 43 characters.

Mobile devices

Manual-resize

The manual-resize feature on mobile devices doesn't provide an optimal user experience. Therefore, it's replaced with a fixed height that enables users to scroll vertically.

A textarea component with a label, and text inside it. The character counter on the top right of the component shows fifty out of fifty characters.

An example of a textarea component containing lots of text content on a mobile device. This textarea has a fixed height and scroll functionality.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Hover

Focus

Disabled

Read only

Error

Error - hover

Error - focus

Examples

LTR examples

Here are some examples of textareas in a left-to-right context:

An auto-resized textarea component with a label aligned to the left.

A manual-resized textarea component with a label aligned to the left.

RTL examples

Here are some examples of textareas in a right-to-left context:

An auto-resized textarea component with a label aligned to the right.

A manual-resized textarea component with a label aligned to the right.

Resources

Figma Component	Stable
Figma Documentation	Stable
Web Components	Beta
Vue [Fozzie]	Stable
React [Snacks]	Stable
iOS JustUI [UI Kit]	N/A
iOS PIE [SwiftUI]	N/A
Android PIE [Compose & Views]	N/A