1. Hint Text
A format hint is text that tells the user the format that should be used when entering data into a text box.
Hints message should be short and should be located inside the text box.
When deciding whether to provide a format hint, consider the knowledge of the targeted user.
2. Delete icon inside text field
A delete icon can be displayed to provide quick action to remove input in the text field.
3. Selected text input box
On-click the text input box, a blue outline will highlight the text input box to set focus on the primary active text field.
4. Error message
An error message and error icon should be displayed below the text field after users have entered error input, the system must be prompted to correct the input.
5. Display-Only Text Field
A non-editable text box may display information about the items in another control. For example, as the user moves the mouse cursor over items in a list, information about each item is displayed in the non-editable text box.
The labels of "display-only" text fields are typically enabled and do not change with user actions in other areas of the UI.
Set the width of the text input box to a size that covers most of the use cases. By default, a text input box grows or shrinks as the user resizes the window
6. Editable Text Boxes (multi-line)
Users can type and replace text in a text box. Use the same text-editing features as with the editable text field. Set word wrap so that the text wraps to the next line when it reaches the edge of the text area, as shown
Why Use This Pattern?
The user needs to enter data into the system.
What's the Solution?
A text input box (also known as a text field) is a rectangular area that displays a single line or multiple lines of text.
- When reasonable, automatically set focus to the primary text field.
- Use a limit for the length of the input text when you can. As the length of the text box may vary from one use case to another the length should be limited to the maximum number of characters required. For example, if the valid input is a number between 0 and 999, use a numeric text box that is limited to three characters.
- As a backup to formatting hints, format masks can be applied to text boxes. For example, a text box could accept only alphanumeric characters and reject special characters or punctuation. Common places to use a format mask when accepting input from users include: IP address, phone number, email address.
When to Use This Pattern?
- Use when the label of an input field does not fully explain what should be filled into it or when using such a label feels like over-explaining the interface.
- Use when an example text or question answers what should be filled into an input field just as well as a label.
- Use when you want to save the space that a label otherwise takes up.
- Use in combination with a label, to further explain what kind of input is needed.
- In an editable text box, users can edit, cut, copy, or paste text.
DO NOT Use This Pattern When...
- When there’s default value
- When there’s set of options pre-defined