Text fields

Text fields let users enter and edit text. They typically appear in forms and dialogs. Various options can be shown with the field to communicate the input requirements.

Usage

A text field is an input field that users can type into. It supports several text formats including numbers.

Color usage

Different colors are applied to the text, background, border and or icons, according to the state and type of text field in use.

Types of forms

There are three types of forms, where you will likely find and use text fields:

Display-only forms: the data is presented only as label-value field pairs without editable fields.
Editable forms: the data is presented as label-input field pairs, so users can enter data.
Mixed forms: some fields are editable, and some are not.

States

States are visual representations used to communicate the status of the text field. Each state is visually similar and does not drastically alter a text field but still has clear affordances that distinguish it from other states and the surrounding layout.

There are 8 different states available for text fields:

Activated: activated state communicates a highlighted destination, whether initiated by the user or by default
Disabled: disabled text fields indicate the field exists but is not available to the user
Focused: focused state communicates that a user is currently using a text field component, using an input method such as a keyboard or voice command
Resting: resting state communicates a non-interactive text field
Hover: hover state communicates when a user has placed a cursor above the text field
Read-only: read-only text fields display pre-filled text that the user cannot edit. A read-only text field is styled the same as a regular text field and is clearly labeled as read-only.
Critical: indicates an erroneous input text value
Success: indicates a valid input text value

Anatomy and content

A text field component is made up of several elements, some of which are only visible depending on the selected customization options.

Container
Leading icon (optional)
Label text
Input text
Trailing icon (optional)
Second trailing icon
Left adorn
Right adorn
Border
Helper text (optional)
Character counter

Labels

There are different types of labels:

text only

text & asterisk

text & icon

text & asterisk & icon

Choose the one that best fits the situation.

Label text

Labels act as a title for the text field. They should typically be short and in noun form. For example, “Name”.

Labels are used to inform users as to what information is requested for a text field.

A label should be aligned with the input line, and always visible.

Labels shouldn't be truncated. Keep it short, clear, and fully visible.

Label text shouldn’t take up multiple lines.

Text fields without labels

A text field doesn’t require a label if the field’s purpose is indicated by a separate, independent label.

Required text field indicator

To indicate that a field is required, display an asterisk (*) next to the label text.

Mention near the form that asterisks indicate required fields.

If some fields are required, indicate all required ones

If most fields are required, indicate optional fields by displaying the word “optional” in parenthesis next to the label text

Text field input

Size and format

The width and size of a text field can be customized appropriately for its context. This is particularly useful for readability and accessibility purposes.

Input text

Input text is text entered by the user.

Cursor

A cursor indicates the current location of text input in a field.

Character limit

If you reach the (pre-defined) character limit when typing into a text field, the input is automatically shortened. In that case, insert three dots to signify an ellipsis.

Placeholder

The text placeholder should only be used when the label and/or description are not sufficient to clearly understand the intended input.
It should always be written as an example and start with a common formulation such as "e.g." in english, or "p. ex." in french.
The placeholder can occasionally be used to invite the user to click and start typing with an open question or formula related to the intended content, but cannot replace the label.
However, this use case is reserved for isolated inputs, not forms.

ASSISTIVE ELEMENTS

Assistive elements provide additional detail about text entered into text fields.

Helper text

Helper text conveys additional guidance about the input field, such as how it will be used. It should only take up a single line, being persistently visible or visible only on focus.

Feedbacks messages

Replace helper text with semantic text when applicable for text fields that validate their content (such as passwords). This helps prevent new lines of text from being introduced into a layout and bumping content to fit it.

If only one error or success is possible, error or success text describes how to avoid the error or how you success.
If multiple errors or successes are possible, error or success text describes how to avoid the most likely error or how you most likely success.
Swap helper text with feedback messages.
Don't place feedback messages under helper text, as their appearance will shift content.
Long errors can wrap to multiple lines if there isn't enough space to clearly describe the error. In this case, ensure padding between text fields is sufficient to prevent multi-lined errors from bumping layout content.

Icons

Icons can be used to message alerts as well. Pair them with error messages to provide redundant alerts, which are useful when you need to design for colorblind users.

Character counter

Character or word counters should be used if there is a character or word limit. They display the ratio of characters used and the total character limit.

Adornments

Text and number inputs can support a prefix or suffix to ease the understanding and filling. This information is always displayed inside the field and cannot be changed manually.

Examples of adornments: a currency symbol, a unit of mass, an email domain address, grading scale

Hints

Hints are optional assistive elements that can be added under a text field. You can use one of the following: text only, text & counter and counter only.

Icon (optional)

Icons in text fields are optional.

Text field icons can describe valid input methods (such as a microphone icon), provide affordances to access additional functionality (such as clearing the content of a field), and can express an error.

Leading and trailing icons change their position based on LTR or RTL contexts.

Icon signifier

Icon signifiers can describe the type of input a text field requires, and be touch targets for nested components. For example, a calendar icon may be tapped to reveal a date picker.

Valid or error icon

Iconography can indicate both valid and invalid inputs, making error states clear for colorblind users.

Clear/cancel icon

Clear icons let users clear an entire input field. They appear only when input text is present.

Dropdown icon

A dropdown arrow indicates that a text field has a nested selection component.

Container

Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content.

Fill and stroke

A text field container has a fill and a stroke. The color and thickness of a stroke can change to indicate when the text field is active for example.

Input types

Text fields can display user input in the following ways:

Single line text fields display only one line of text. In single-line fields, as the cursor reaches the right field edge, text longer than the input line is hidden or an ellipsis is inserted.
Single-line fields are not suitable for collecting long responses. For those, use text area or a multi-line text field instead.

Text areas are fixed-height fields :

Text areas are taller than text fields
They wrap overflow text onto a new line
They are a fixed height
They scroll vertically when the cursor reaches the bottom of the field.
The large initial size indicates that longer responses are possible and encouraged
They should be used instead of multi-line fields on the web

Behaviour and interaction

A text field is a responsive component and can be resized to any dimension needed.

Text fields can span the full width of the display on small screens but should be bounded by flexible margins or other containers on larger screens.

Responsiveness and density

Guidance for use cases where increased density improves the user experience.

Default: 38px

Comfortable: 28px

Compact: 24px