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


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.

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

Empty text field example

For a required text area, a red asterisk should be added next to the label.

For a read-only text area, a lock icon should be added next to the label.


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.



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.


They are shown as rectangles with a 1px outline.