Usage guidelines
- Any time succinct data needs to be entered by a user, like a date, email address, name or Pin title.
- Situations where long amounts of text need to be entered, since the full inputted text of the TextField could be truncated. Use TextArea instead.
Best practices
For general text field best practices, refer to the Web Text Field Documentation.
Use helper text for important information. Helper text helps users understand how to complete the text field or to indicate any needed input.
Put essential information in the placeholder text; instead put it in the helper text.
Always make sure the text field has a visible label. The label provides context and supports users when filling in information.
Remove the label, as this creates accessibility and usability issues. Users can lose context on what is required in the field.
Provide clear and useful error messages that help the user fix the issue. Error messages should be displayed on time — typically once the field loses focus or when the form is submitted.
Display generic error messages, such as "There is an error" or remove the leading icon.
Consider all text fields as required, unless explicitly noted as optional.
Mark fields as required.
Use the show/hide "eye" icon when asking sensitive information that may need to be double-checked. Used often for passwords.
Place fields horizontally. This creates unnecessarily restricted fields and a more complex interaction pattern.
Accessibility
People use Android's accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:
Accessible design on Android
Accessible development on Android
Labels
Be sure to provide a unique label for each TextField.
Validation
When providing a validation message, make sure the instructions are clear and help users complete the field. For example, "Passwords must contain at least 20 characters". Additional helpful information could be, indicating which input is needed, describing allowed formats, timing limitations, etc.
These practices give users of assistive technologies more information about the form, helping them to fill it out.
Keyboards
Make sure your keyboards match the function of your form field. For example, asking for a phone number should pull up the phone pad keyboard.
Design tokens
Anatomy
See below how the TextField component is constructed.
Variants
- With helper text
Whenever you want to provide more information about a form field, you should use helper text. - Disabled
Disabled Text Fields can't be interacted with. They also don't need to meet contrast requirements, so don't use them to present info to the user. - Error
Text Field can display an error message below the field. Always include an icon to illustrate the error by more than just color. - Success
Text Field can display a success message below the field. Always include an icon to illustrate the success by more than just color.
With helper text
Disabled
Error
Success
Colors
Overview of how the TextField colors look in both themes.