Field components

Compare field components to determine when to use labels, requirements, help text, tooltips, and placeholder text in a user interface.

You have a few ways to provide contextual details about fields in a UI. The following table compares the different ways you can provide context about a field and describes when to use each one. See the sections below the table for additional details.

Field component Requirement What it is
Field labels Required A concise statement placed directly above a field that provides context about what the user needs to enter or select in that field.
Form requirements Conditional A concise statement that indicates whether the user is required to fill in all fields in a form or if there are optional fields.
Help text Optional Supplementary text placed below a field that explains critical information for completing the field, such as syntax or formatting requirements.
Tooltips Optional Noncritical, supplementary information that appears when a user hovers over an information icon next to a field. Tooltips contain hint text and don't include essential information about the field.
Placeholder text Optional and discouraged Temporary text located inside of a field that disappears after a user places their cursor into the field. Placeholder text is acceptable only when content is not critical, such as an example of what to enter into the field.

Field labels

Make field labels concise, use sentence-style capitalization, and place them outside the field box to ensure clarity and accessibility.

All fields must have a label that follows this guidance:

  • Place field labels outside of the field box, and not inside the of field box.
  • Keep field labels brief and use sentence-style capitalization.
  • Use a noun phrase to describe the field value.
  • Avoid phrasing field labels as questions.
  • Don't use placeholder text in place of a field label because text inside the field box disappears after the user selects it.
The following screenshot shows examples of what to do and what not to do when creating field labels. The ideal field label, "Tenant name", is concise and uses sentence case. The nonideal field label, "What is the tenant name?" is worded as a question.
Screenshot of an ideal field label that is concise and in sentence case, and a nonideal field label that is worded as a question.

Text for required fields

When users are required to fill in all fields in a form, include a line of copy indicating the requirement before the form.

In this example form, all fields are required. The form uses the description, "All fields are required, except where marked as optional."
Example of required fields in a UI, where the line above the fields indicates that all fields are required.
Note: Asterisks next to field labels create visual clutter. If you decide to mark required fields with the symbol, state what the asterisk means in the text that precedes the form.

Text for optional fields

If a field is optional, include the word "optional" in parentheses at the end of the optional field label copy.

This example form includes an optional field that uses the label "ID number (optional)".

Screenshot of a form where the first field says ID number (optional).

Help text

Help text provides essential context and instructions directly below a UI field, ensuring users understand formatting requirements and field purposes.

Help text is a brief statement located directly below a field in a UI that provides important context, such as instructions or formatting requirements. If the information is critical to completing the task, include those details in the help text so it always remains visible. For less critical information, consider using a tooltip instead. See Tooltips.

Use help text to provide clarity and define the purpose of each field. Consider the following points when crafting help text:
Length
Indicate character or content limits so users know how much information to provide.
Audience
Specify who sees this field to help users understand the context and importance of their input.
Editability
Let users know if they can change this field later or if their entry is permanent.
Differentiation
Explain how a field differs from similar fields to prevent confusion.

Example

The following screenshot shows the difference between essential help text under a field and a tooltip that's hiding important information:
Example of ideal help text that describes requirements under the field, and nonideal help text where the formatting requirements are hidden in a tooltip.
In this example, the help text "Must be 6-12 numbers, no spaces" is ideal because it describes formatting requirements for a value directly visible under the field. In contrast, the nonideal help text hides the same text in a tooltip, which requires the user to hover over it.

Tooltips

Tooltips offer additional information for UI elements but require user interaction. Use visible help text for essential details to ensure clarity and accessibility.

Tooltips provide supplemental information to help users understand the meaning or purpose of UI elements, such as an icon or a field. However, tooltips require an additional user action: The user must hover over the information icon, which could block surrounding text, hide critical details, or distract the user from the task at hand.

Avoid using tooltips for essential information. Instead, opt for visible help text for clearer and more accessible guidance. See Help text.

Minimize the use of tooltips to enhance usability. If you need to include a tooltip, follow these guidelines:

  • Be short and concise. A tooltip can vary in length from 1 word to a couple of short sentences.
  • Use sentence-style capitalization.
  • Use a period to punctuate full sentences. If the tooltip is a short phrase or the name of a tool or icon, don't punctuate the tooltip with a period.
  • Use present tense.
  • Don't use "please".
  • If the UI element requires a lengthy explanation, consider a different design or use a link to the product documentation instead of a tooltip.
  • Don't include interactive elements such as links or buttons in tooltips. If links are needed, use a popover instead. A popover is a component for overlaying content on a page permanently and is used as a last resort.

Examples

The following table shows examples of what to do and what not to do when writing tooltips:

"" Do this "" Don't do this
Print Print.
Enter a name for the model. Include information like the dataset name, the field you're predicting, or the algorithm being used. Please enter a name for the model so you can refer to it later. You might include information like the name of the dataset, the field you are predicting, or the algorithm being used.
Specifies the maximum amount of time that a summary-creating search can run. Enter 1 hour to ensure proper summary creation for most data models. Maximum time
View histograms for the 3 supported distribution types of Normal, Exponential, and GaussianKDE. Review these results for statistical behavior needing further investigation. This view helps to get a sense of how groups with similar type of distribution are similar to each other. Do you see that the histogram of mean and standard deviations are very sharp and narrow? This means that most of the groups have similar statistical behavior, so you could consider not splitting them. Are there 2 distinct peaks in the histograms? That signals 2 obvious characteristics in your groups. It's worth investigating more.
The following screenshot shows concise tooltip text that isn't covering a field in a UI:
Example of ideal tooltip text that appears above all fields when hovered over, and an example of nonideal tooltip text that covers the fields when hovered over.
The ideal tooltip text appears above all fields when hovered over and does not cover any text or components of the UI. The nonideal tooltip covers the fields when hovered over, potentially obscuring important information.

Placeholder text

Placeholder text in fields can hinder user experience by disappearing upon input, causing memory strain, redundancy, and accessibility issues. Use help text or tooltips instead.

Placeholder text is text located inside a field box. Whenever possible, avoid placeholder text for these reasons:

  • Placeholder text disappears when users start entering text in the field, which can strain memory and prevent them from reviewing their input.
  • Using both help text and placeholder text is redundant and clutters up a form.
  • Empty fields catch the eye better than fields with text in them.
  • Placeholder text is usually low contrast and not accessible.

Instead of placeholder text, use these UI elements:

  • Use help text to provide instructions. See Help text.
  • Use a tooltip to provide hints for filling in the field. See Tooltips.

Examples

The following screenshot shows how you can use other UI elements instead of placeholder text:

Example of using a field label and help text together to show essential formatting information, and a nonideal example of placeholder text.

The ideal example uses the "Attribute" field label and "Key:value format" help text together to show essential formatting information without it disappearing. The nonideal examples uses "Key:value format" as placeholder text, which disappears when a user enters text into the field.

If you must include placeholder text to show a supplementary example, keep placeholder text short and concise.