Skip to content

Text field

Text inputs enable users to enter free-form text data. The type of text field used should reflect the length of the content you expect the user to enter. The default text input is for short, one-line content, whereas the text area is for longer, multi-line entries.

Principles

Discoverable: Text fields should stand out and indicate that users can input information.

Clear: Text field states should be clearly differentiated from one another.

Efficient: Text fields should make it easy to understand the requested information and to address any errors.

Usage

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

When to use

  • A user needs to input unique information that cannot be predicted with a preset of options.
  • A user needs to input memorable data that can be entered more quickly in a free-hand format versus a more complex
  • control.

When not to use

  • If a user can only enter an option from a predefined list, then avoid using a free-form text field as it is likely to
  • result in an error. Consider using a selection control such as a dropdown, select, or radio button group instead.

Variants

Text fields come in two variants: filled text fields and outlined text fields. By default, it's better to use the outlined type.

1. Filled
2. Outlined

Both variants use a container to provide a clear affordance for interaction, making the fields discoverable in layouts.

Input types

Text fields can display user input in the following ways:

  • Single line text fields display only one line of text
  • Multi-line text fields grow to accommodate multiple lines of text
  • Text areas are fixed-height fields

Single-line fields

In single-line fields, as the cursor reaches the right field edge, text longer than the input line automatically scrolls left. Single-line fields are not suitable for collecting long responses. For those, use a multi-line text field or text area instead.

Multi-line fields

Multi-line text fields show all user input at once. Overflow text causes the text field to expand (shifting screen elements downward), and text wraps onto a new line. These fields initially appear as single-line fields, which is useful for compact layouts that need to be able to accommodate large amounts of text.

Text areas

Text areas are taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field.

The large initial size indicates that longer responses are possible and encouraged. These should be used instead of multi-line fields on the web. Ensure the height of a text area fits within mobile screen sizes.

Read-only fields

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.

  1. A filled read-only text field.
  2. An outlined read-only text field.

Design guidelines

Anatomy

  1. Container
  2. Leading icon (optional)
  3. Label text
  4. Input text
  5. Trailing icon (optional)
  6. Activation indicator
  7. Helper text (optional)

Container

Containers improve the discoverability of text fields by creating contrast between the label and surrounding content. The containers must meet 3:1 non-text contrast requirements.

  1. Fill and stroke: A text field container has a fill and a stroke (either around the entire container, or just the bottom edge). The color and thickness of a stroke can change to indicate when the text field is active.
  2. Rounded corners: The container of an outlined text field has rounded corners, while the container of a filled text field has rounded top corners and square bottom corners.

Leading icon (optional)

Icon signifiers can describe the type of input required by a text field and be touch targets for nested components. In this case, the icon is placed at the beginning of the input.

Label text

Label text is used to inform users as to what information is requested for a text field. Every text field should have a label.

Label text should always be visible, moving from the middle of the text field to the top (if the field is selected).

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

Label text shouldn’t take up multiple lines.

Required text indicator

To indicate that a field is required, display the "Helper text" and indicate whether the field is required or optional according to the following situations:

  • If some fields are required, indicate all required ones.
  • If most fields are required, indicate optional fields by displaying the word “optional” in the optional text.

If required text is colored, that color should also be used for the optional text

Input text

Input text is text the user has entered into a text field.

  1. Input text: Input text is text entered by the user.
  2. Cursor: A cursor indicates the current location of text input in a field.

Trailing icon

Icon signifiers can describe the type of input required by a text field and be touch targets for nested components. In this case, the icon is placed at the end of the input.

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.

  1. 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.
  2. Valid or error icon: Iconography can indicate both valid and invalid inputs, making error states clear for colorblind users.
  3. Clear icon: Clear icons let users clear an entire input field. They appear only when an input text is present.
  4. Voice input icon: A microphone icon signifies that users can input characters using voice.
  5. Dropdown icon: A dropdown arrow indicates that a text field has a nested selection component.

Icons that are used to indicate errors can be paired with error messages (as helper text) to provide redundant alerts, which are useful when you need to design for colorblind users.

Activation indicator

Indicates whether the field is in focus, hover, or error state. By default, it is gray.

Assistive elements

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

  1. Helper text: Assistive text that can provide additional aid or context to the user. Often used to explain the correct data format. It is positioned below the field.
  2. Error message: When text input isn't accepted, an error message can display instructions on how to fix it. Error messages are displayed below the input line, replacing helper text until fixed.
  3. Trailing icons as status indicators
  4. 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.
Error text

For text fields that validate their content (such as passwords), replace helper text with error text when applicable. Swapping helper text with error text helps prevent new lines of text from being introduced into a layout, thus bumping content to fit it.

  • If only one error is possible, an error text describes how to avoid the error
  • If multiple errors are possible, an error text describes how to avoid the most likely error

Swap helper text with error text.

Don't place error text 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.

Behaviour

Scaling and adaptation

As layouts adapt to larger screens and form factors, apply flexible container dimensions to text fields. Set minimum and maximum values for margins, padding, and container dimensions as layouts scale so that typography adjusts for better reading experiences.

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.

As text fields expand within fluid layouts, avoid maintaining fixed margins and typography properties because this can lead to extra long text fields.

Text fields should not, for example, span the full width of a large screen.

Filled text field

Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.

Don’t design text fields to look similar to buttons, as they could be mistaken for buttons.

Dense text fields

Dense text fields enable users to scan and take action on large amounts of information. A dense text field has a height of 40px.

A form with dense text fields filled

Labels in dense text fields

In this type of field, you can use a label inside or outside the container. If the dense text field has a label, its height is the same as the medium field.

  1. Dense text field with a label
  2. Dense text field without a label
Text fields without labels

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

Text fields with adjacent labels

Prefix and suffix text

  1. A text field with a currency symbol text prefix.
  2. A text field with a unit of mass suffix.
  3. Text field with a suffix expressing an academic grading scale.
  4. Text field with an email domain address suffix.
States
Baseline

Filled text fields can display the following states: inactive, activated, focused, hover, error, and disabled.

Without labels

Filled text fields (without labels) can display the following states: inactive, activated, focused, hover, error, and disabled.

With prefix text

Filled text fields (with prefix text) can display the following states: inactive, activated, focused, hover, error, and disabled.

With suffix text

Filled text fields (with suffix text) can display the following states: inactive, activated, focused, hover, error, and disabled.

Specs

Filled text field

Filled dense text field

Filled text field with label

Filled text field with error

Outlined text field

Outlined text fields have less visual emphasis than filled text fields. When they appear in places like forms, where many text fields are placed together, their reduced emphasis helps simplify the layout.

Dense text fields

Dense text fields enable users to scan and take action on large amounts of information. A dense text field has a height of 40px.

A form with dense text fields outlined

Labels in dense text fields

In this type of field, you can use a label inside or outside the container. If the dense text field has a label, its height is the same as the medium field.

1. Dense text field with a label
2. Dense text field without a label

Text fields without labels

A text field doesn't require a label if the field's purpose is indicated by a separate, independent label. Text fields with separate but clear labels can indicate what the fields are for (title, price, and location).

Prefix and suffix text

  1. A text field with a currency symbol prefix
  2. A text field with a unit of mass suffix
  3. A text field with a grading scale as suffix
  4. A text field with an email domain address suffix
States
Baseline

Outlined text fields can display the following states: inactive, activated, focused, hover, error, and disabled.

Without labels

Outlined text fields (without labels) can display the following states: inactive, activated, focused, hover, error, and disabled.

With prefix text

Outlined text fields (with prefix text) can display the following states: inactive, activated, focused, hover, error, and disabled.

With suffix text

Outlined text fields (with suffix text) can display the following states: inactive, activated, focused, hover, error, and disabled.

Specs

Outlined text field

Outlined dense text field

Outlined text field with label

Outlined text field with error