A text area allows users to enter, read and edit text.

A text field being edited in user record edit page

Structure

The text area is a multiline text field. 

Generally, it has a label which indicates the type of input associated with the field and an area to enter text. 

Be aware: Placeholders should be avoided. If the field is empty, a “null” icon should be displayed as a visual indicator.

Empty text field example

Behavior

When users click on a text field, the field should become active. 

If the text entered is longer than the field, the font size should adjust to fit the field.

Style

Color

Since the text area is a clickable element, it has multiple states.

Each state is associated with a different color, providing visual feedback to users.

Default text area
Valid text area
Warning text area
Error text area

Shape

They are shown as rectangles with a 1px outline.

Related pages

A repeatable field allows users to enter multiple values for the same key.
A search field allows users to search for specific information
A select field allows users to select one option from a list of more than 10 items. 
A text field allows users to enter, read and edit text.
A timepicker allows users to pick a time from a popup.