We show users a simple text field frequently in forms where users need to enter information. The text field also appears in search so that users can type in the thing they’re looking for.
Text fields should embody these characteristics.
Easily recognized as an input field and clearly differentiated among other elements.
Text fields should indicate their state – whether enabled or disabled, empty or filled, valid or invalid – with clear label, input, and help text.
Proactively guide users to prevent errors. Gracefully help them identify and fix errors when they occur.
Be mindful of the user’s mental model. Anticipate and attend to the needs of different user types (consumer, pro, etc.)
Five elements of text fields:
1. Labels for text fields
To make sure our text fields are accessible to all users, text labels are required for input items. Use clear, concise, consistent labels to guide the user. If the subject is complicated, find words to make it simpler. Each label is left-justified and appears above the field it describes.
2. Required indicators vs. optional indicators
Sometimes it’s important for a user to know if a field is required. Other times, it’s important for them to know something is optional. In a flow, call out what’s important for the user to know but don’t mix required and optional labels in the same flow. In most cases, this means calling out the minority, not the majority. In some cases, it isn’t necessary to call out either. For example, when signing up for a new product, it is self-explanatory that a user name and password are required, so we don’t need any indicators.
Both required indicators and optional indicators appear to the right of the field label. There is no need to include a legend.
Real-time field-level validation appears as needed. Some examples are email validation and credit card format verification. Other validation happens once the user sends the form or input items.
When an error occurs, the outline of the field turns red and an error icon & text appears in front of the red field label. If there was a required indicator on the field, it turns red. More form validation information can be found in the errors pattern.
4. Placeholder text
Placeholder text (also known as the html placeholder attribute) is reserved only for situations where the user may need extra help understanding what to enter. When formatting is important for validation (such as in the case of a Social Security number or phone number), placeholder text can help guide the user. However, the field should automatically handle the addition of special characters as the user is typing so they can just focus on entering the proper digits. By having the field auto-format the content, the user can move through the form efficiently without needing extra guidance.
Placeholder text should be placed inside the field, be Medium, and use hex #babec5.
5. Masked Data
If it is important to hide data that has been entered in a particular field, use an asterisk to represent the masked character. For example, when viewing an account number in edit mode, the field may show *********1234 so that only the last 4 digits are visible.
When formatting is important for validation, such as in the case of a Social Security or phone number, the field should automatically handle the addition of special characters so the user can just focus on entering the proper digits.
For accessibility, the order of the fields should read top-to-bottom, left-to-right. Labels are always above form fields, never to the left.
Labels, tooltips, and input fields should appear in the right keyboarding tab order.
Content guidelines for text fields
Form labels are sentence case. Examples: Customer name, Payment type
A black asterisk can appear at the end of labels for required fields. Don’t include *Required as a footnote or legend on the page.
Placeholder text capitalization is sentence case.
Placeholder text is italicized within the field. However, “optional” text may appear to the right of field labels when calling out optional instead of required fields.
Although credit card, phone, account, and Social Security numbers should be partially masked with asterisks (that is, except the last four digits), passwords are completely masked.
Punctuate placeholder text only when it’s a complete sentence.
Don’t rely on placeholder text or hint text to take the place of field labels or to give more information about filling out a field, such as required formatting and restrictions. Placeholder text might not be accessible for users navigating the site with a screen reader.