Usage
A Text Input is a form control that allows the user to enter text into a UI. They typically appear in forms.
Anatomy
A Text Input consists of three areas.
- Label: Text to inform users as to what information is requested
- Text input: The form field where the user can input information
- Placeholder text (optional): Text that provides an example of what the user should enter into the Text Input. In many situations the placeholder can be left blank since the label indicates what information should be entered but it is useful when formatting of information is important.
Sizing & spacing
The length of the input should be as close to the intended length of content as possible.
States
Text Inputs can display the following states: unselected, hover, focus, disabled, valid, and invalid.
Read only
Read-only Text Inputs should be used when there is no action the user can take on the page to enable the field. The benefit of using the read-only input field over a body of text is it still has a focused state, meaning the user can navigate to it using their keyboard.
Read-only Text Inputs may cause frustration or confusion. You may consider using a Tooltip that informs them where they may be able to go to change the information that appears in the read-only Text Input.
Validation
A success Text Input is outlined in green. A success message may appear below or next to the input.
An error text Input is outlined in red. Error message with details on the error will appear nearby.
Types
Text inputs with actions
In rare occasions, a Button can be placed directly next to the Text Input, most commonly seen on search fields. The close proximity of this Button saves space in the UI and ties an action directly to a Text Input. The button should have a text label or use a very clear and deliberate icon. This button placement should be used rarely and should not be used for most single Text Inputs or on Forms.
For more information on Search, see the guidelines.
Input prefix
An input prefix can be added to front of the Text Input to specify what should be entered, such as a dollar sign. To add more attention a container can be added to the styling. These labels are typically an icon.
Input suffix
An input suffix can be added to back of the Text Input to specify what should be entered, such as a percentage symbol. These labels are typically an icon.
Input prefix & suffix
An input prefix and suffix can be added to front and back of the Text Input to specify what should be entered, such as a dollar sign and a decimal number to represent a dollar amount.
Best practices
Labeling
Place holder text
Use placeholder text when demonstrating format may be helpful
Input length
Alternate considerations
- Use a Textarea when users are allowed to input a sizeable amount of free-form text.
- If the user should be presented with a list of supported or known values to choose from, consider one of the following: