Introduction
Text input fields enable users to enter custom text using a keyboard. They can be accompanied by options to convey specific input requirements and are commonly used in forms and dialogues.
It's important to ensure they indicate their purpose clearly. Consider the context and provide relevant instructions or placeholders that make it easy for users to understand what information is required. Furthermore, adding effective error handling and validations help users identify and address any input errors promptly.
- Text inputs allow for a single-line of text, e.g. address, first and last name
- Inputs can also be used for dates, email addresses and passwords
- By default, all form elements are mandatory; label them as optional only if they are indeed optional.
Usage
Give each text input field an associated label to provide clear context to the user as to what information they are expected to provide.
While placeholders are optional, labels are not. Always include a label to each text input field.
Ask users to input on single data entry per text input field.
Don't combine data entries into one single text input field.
Use icons should thoughtfully and only when it provides either an additional benefit or action to the user.
Avoid using icons should excessively.
Use hints to provide suggestive and helpful information as to what is expected from users.
Avoid hints that just restate the same information as given in the label.
Keep error messages short and focus on providing a helpful solution to the user.
Don't provide vague error messages that leave the user guessing on what went wrong.
Use text input fields for single lines of text or a single, short data entry.
Don't use text input fields for long texts such as message. Use a textarea instead.
Also known as
Form input, Text input, Text field