Modifiers
With placeholder text
New research has shown that placeholder text strains users’ short-term memory and clutters the UI — see the user research section for more information. Don’t rely on placeholder text to deliver important information. Add help text if the input needs more explanation.
With help text
Add help text to further explain the text input’s function or meaning. Use help text if there is too much information to fit into the text input’s label.
This is an example of help text. It can wrap to two lines, but try not to go longer than three.
With error message
If a text input throws an error, an error message will appear below the input.
Delete the invalid value in the preview to clear the error message.
This is an example of an error message.
With help text and error message
If a text input requires help text and throws an error, an error message will appear above the help text.
Delete the invalid value in the preview to clear the error message.
This is an example of an error message.
This is an example of help text. It can wrap to two lines, but try not to go longer than three.
States
Disabled
A text input can be disabled if the experience requires it. If you need to disable a text input, make sure the reason is obvious. If the reason is not obvious, you can keep the input enabled and add an error message to explain. The user’s entry or non-entry within the text input will not be submitted with the form’s data.
Readonly
Set the text input to readonly if the user should not be allowed to enter or change the input’s entry and if that entry should be submitted along with the rest of the form’s data.
Required
The text input should be required if the user must fill out that field to submit the form. Ensure that the text input’s information is necessary before requiring a user to fill it out.
Usage
Text inputs allow users to enter or edit short lines of text or data. Inputs are usually part of a form, but can also be standalone, such as search fields.
Mobile keyboards aren’t as easy or quick to type on as a laptop, so keep this experience in mind when designing with input fields. If there are many input fields in your designs, consider alternative layouts or components.
Do:
- Use inputs for entering or editing short lines of text
- Mark inputs as required
- Add help text when further explanation is needed
- Be forgiving of different formats for data types, such as phone number formats and date formats
- Remove the input’s placeholder text if it is unnecessary
Don't:
- Use inputs for large blocks of content — use a textarea
- Remove the input’s visible label — only do this when absolutely necessary; you must have an aria-label for screen readers
Content guidelines
Input labels and placeholder text are required for all text inputs. When necessary, a text input can have help text added.
If the text input is required or if the input requires a certain format or content restriction, the text input must also have an error message explaining these requirements to the user.
Do:
- Use concise, clear language for input labels, placeholder text, and help text
- Use sentence case for input labels, placeholder text, and help text
- Review error messaging guidelines when writing text input error messages
- Provide an aria-label for when the input’s visible label is removed
- Add help text when providing additional information
- Write the help text as a self-contained piece of content
- Append invisible text to the end of the text input label, if necessary
Don't:
- Rely on the input’s placeholder text to explain the input’s purpose — use help text instead
- Use placeholder text as an example of the input’s content format — for example, (000)000-000
- Add verbs to input labels
- Remove the input’s visible label unless it is necessary
- Rely on the placeholder text as a substitute for a label
- Add invisible text in the middle of text input label
User research
Key takeaways
Text inputs on mobile devices
When designing forms, keep the mobile experience in mind. Ensure that the text input is large enough for touch screen users to interact with, and that the text inputs are necessary. Help the user fill the fields out faster by using historical data, auto-fill, or auto-complete — but not for names, emails, or addresses. Ensure that the correct keyboard is being shown for the type of input.
Labels
Labels should be visible at all times. The only way visible labels can be removed is if the input’s function is obvious, if it is necessary, and if the input field has an aria-label attached to it.
Placeholder text
New research has shown that placeholder text strains users’ short-term memory and clutters the UI. We will continue to provide an option to add placeholder text, but will keep in mind that we shouldn’t rely on placeholder text to deliver important information. Add help text If the input needs more explanation. Placeholder text should remain visible until the user types at least one character into the text input.
Required fields
Required fields should be marked with text saying “required” instead of using an asterisk to provide more clarity. Research has found that marking fields as “required” and “optional” lightens the user's cognitive load. Currently, we are only marking fields as required to keep input labels uncluttered and easier to scan.
Alignment
Text inputs should be ordered vertically, unless circumstances dictate otherwise. Vertical form fields are easier to scan and understand.
Study links
Primary sources (Boston Scientific user research)
No sources
Secondary sources
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that this component is fully accessible.
See these references for more information: