Desktop

Mobile

We present users with a single-line field for viewing data or entering information or search terms. We call this a text field.

When we want to show users a field where they can enter numerous lines of copy, we use a text area.

Usage

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.

There are five elements of text fields:

  1. Labels for text fields
  2. Required indicators vs. optional indicators
  3. Validation
  4. Ghost text
  5. Masked data

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.

Required indicators: asterisk in Avenir Next forIntuit 14 pt #404040.
Optional indicators: italicized “optional” in Avenir Next forIntuit 14 pt #babec5.

3. Validation

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, an error icon appears in front of the red field label. The outline of the field turns red. If there was a required indicator on the field, it turns red. More form validation information can be found in the errors pattern. And you can also review this PDF for forms best practices.

4. Ghost text

Ghost 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), ghost 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.

Ghost text should be placed inside the field, be italicized, 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.

Accessibility

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.

Accessibility pro tip

Labels, tooltips, and input fields should appear in the right keyboarding tab order. See accessibility guidelines

Responsive behavior

On mobile phones and tablets only, we use line style form fields. Form field labels sit on the line until the field is put in focus and/or completed. This applies to all types of form fields.

Form style on mobile devicesForm behavior on mobile devicesText fields behavior on mobile devices

Content guidelines for text fields

  • Form labels are sentence case. Examples: Customer name, Payment type
  • A black asterisk appears at the end of labels for required fields. Don’t include *Required as a footnote or legend on the page.
  • Ghost text capitalization is sentence case.
  • Ghost 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 ghost text only when it’s a complete sentence.
  • Use ghost 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.
  • Recommended voice and tone attributes: straightforward, encouraging, experienced

Demo

Desktop

If the system detects that the text fields are being served on desktop view, box style form fields are displayed.

Launch Preview
x
px wide

    • Was this Helpful?
    •