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

A text field being edited in user record edit page

Structure

The text field is a single line text input. 

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 they are not needed to avoid input error.

Basic text field - No placeholder needed

 

If more details need to be given to avoid confusions, a placeholder can be used. Below are some examples where placeholders are needed. 

Filter: A placeholder should be used to indicate what content users can filter. It should follow this format: “Filter {content name}…”

Date: The placeholder “YYYY-MM-DD” should be added to show users how to enter a date.

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.

Color

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

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

Default text field
Valid text field
Warning text field
Error text field

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 area allows users to enter, read and edit text.
A timepicker allows users to pick a time from a popup.