Field label, description, extended description and placeholder

Label, placeholder, description, and extended description are tools to help the user understand a control's role in the input or search form.

A field with label, placeholder, description and extended description identified

Label

The control's label describes what it edits. In many cases, giving a control a descriptive label alone can be sufficient.

Placeholder

For those control types that support placeholders, the placeholder can be used to give an example of the expected data or format of the input. Avoid using placeholders for critical information, as they disappear once the user starts typing.

Placeholders should be short, even for controls that can contain long texts, like text area.

Description and extended description

When the label alone is not sufficient to explain a control, the description and extended description are there for further clarification. The description is always visible, while the user will need to manually expand the extended description to read it. A field can have one or both, based on what gives most usable UI.

Use a combination of description and extended description when

  • The important information is concise, but you have supporting details or examples that help illustrate the control. Put the additional, non-essential details or advanced usage instructions in the extended description.

Omit the use of extended description when

  • The information is critical. If it's critical, it deserves to be visible.
  • The information is short. Even if the information is rarely used, there's no need to hide it under the extended description if there's room.
  • The additional information is short. Regardless of the description's length, if the extended description would be very short, put all of the text, both important and unimportant in the description.
  • Designing for users with limited digital experience.. These users might not realize they need to click to reveal more information or may find precise mouse movements challenging.

Put all information in the extended description when

  • Designing a menu item that is part of the user's daily work. In this case, the users will learn what the controls do, and appreciate the saved space.