Status
PublishedElement can be used in production | |
PublishedElement can be used in production | |
PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
Text input is an interactive field that allows users to enter text and data. It’s commonly used in form patterns.
PublishedElement can be used in production | |
PublishedElement can be used in production | |
PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
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.
The text area and text input components have different use cases. Consider the length and type of content when choosing between them.
Component | Use case |
---|---|
Text input | For single-line, short entries, use the text input component. It’s commonly used for name, phone number, or email entries in forms. |
Text area | If 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. |
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.
This component features a text input containing a label, with modifiers to add placeholder text, an icon, helper text, and an error state.
The text input includes five main elements. All elements are optional, except the label and text input field.
In the error state, all elements except the label turn red. In addition, a semantic icon displays to the right of the input field.
This variant adds a button for inputs that may require independent entry submissions, such as coupon codes or search fields.
The text input with button variant includes six main elements. All elements are optional except the label and text input field.
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.
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.
There are five elements included in the anatomy of the password input:
Password input with “Hide” toggled on and password obscured with dots. This view emphasizes: