components icon

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

What's new

The latest version of the text input component includes the design system’s updated color palette and font ramp. It also includes options to add an icon to the field, as well as a submission button. All behaviors and colors now meet WCAG 2.1 accessibility requirements.

When to use

The text area and text input components have different use cases. Consider the length and type of content 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

There are two types of text inputs: the default text input and an input with a button. Either of these types can be used to design text, email, password, and phone number inputs. However, they vary in development based on their respective functions.

Text input

This component features a text input containing a label, with modifiers to add placeholder text, an icon, helper text, and an error state.

The anatomy of the text input component, labeled 1 through 5.

The 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 anatomy of the text input error state, with the error icon labeled.

In the error state, all elements except the label turn red. In addition, a semantic icon displays to the right of the input field.

  1. Error icon: provides validation feedback.

Text input with button

This variant adds a button for inputs that may require independent entry submissions, such as coupon codes or search fields.

The anatomy of the text input with button variant, labeled 1 through 6.

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.
The anatomy of the text input with button error state, with the error icon labeled.

For the input text with button variant error state, an error icon appears within the input field, in addition to the red error message text. If using a button icon, make sure it appears on the opposite side of the button text, away from the error icon, to avoid design conflicts and feedback confusion.

  1. Error icon: provides validation feedback.

Password input

Password fields function identically to standard input fields with the exception of a show/hide control outside of the field that alternately makes the password text visible or obscures it with dots.

The anatomy of the password text input, labeled 1 through 5.

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.
The anatomy of the password text input with 'hide' toggled on, which hides the password with dots.

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

  1. Obscured password: dots that hide password text.
  2. Show/Hide toggle: toggled to “Hide” and displaying the password as dots.

Feedback