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

A text field being edited in user record edit page


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


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.

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


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.