Text Input

Text input is an interactive field that allows users to enter text and data. It’s commonly used in form patterns.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

When to use

Text input and text area components are not used for the same purpose. Consider the use case and the expected length of a user’s answer when choosing between them.

ComponentUse case
Text inputFor single-line, short entries, use the text input component. It’s commonly used for name, phone number, or email entries in forms.
Text areaIf text exceeds more than one line, use the text area component. The larger field size encourages longer responses. It’s typically used for comments or questions in forms.

Anatomy

You can find the default text input, the text input with a button, and the password input. Password inputs include a hide/show control and can’t contain a button.

With or without button

Default text input contains a label, modifiers to add placeholder text, an icon, helper text, and an error state. There is a variant that adds a button for inputs that may require independent entry submissions, such as coupon codes or search fields.

The default text input includes five main elements. All elements are optional, except the label and text input field.

  1. Label: describes the purpose of the field.
  2. Icon: appears before the text within the input field.
  3. Helper text: informs the user how to format or enter text.
  4. Placeholder text: offers contextual guidance.
  5. Text input: displays input field container.

The text input with button variant includes six main elements. All elements are optional except the label and text input field.

  1. Label: describes the purpose of the field.
  2. Icon: appears before the text within the input field.
  3. Helper text: informs the user how to format or enter text.
  4. Placeholder text: offers contextual guidance.
  5. Text input: displays input field container.
  6. Button: submits data, includes label, and optional icon.

Password input

Password fields function identically to standards input fields, except for a show/hide control outside the field and not being able to have a button. The control alternately makes the password text visible or obscures it with dots.

There are five elements included in the anatomy of the password input:

  1. Label: describes the purpose of the field.
  2. Text: the password itself, in this view visible and unobscured.
  3. Helper text: describes the password’s format or guidelines.
  4. Input field: the container for the password field.
  5. Show/Hide control: obscures password or makes password visible. “Show” mode is on.

Password input with “Hide” control on and password obscured with dots. This view emphasizes:

  1. Obscured password: dots that hide password text.
  2. Show/Hide control: obscures password or makes password visible. “Hide” mode is on.

Articles

Checklist for mobile input fields

Read the Nielsen Norman Group's article on input fields.

Error-message guidelines

Read the Nielsen Norman Group's article on error messages.

Feedback