Skip to content
Primer Design System

Primer Design System

On this page

Placeholders

Placeholders have many accessibility and usability concerns to be aware of.
On this page

Overview

Placeholders are hint text placed inside of an input. They are used to help suggest what kind of input should be provided, but have some accessibility considerations to be aware of.

Best practices

  • Avoid using placeholders if at all possible.
  • Instead, use a caption to communicate this information.
  • If you must use a placeholder, be sure that the input also has a concise, descriptive label.

Why?

Placeholders are typically styled using a light text treatment to visually communicate that they are suggestions, and not pre-filled input. However, this often means they are too light to be color contrast compliant. If the placeholder color treatment is darkened to be compliant, it risks being visually interpreted as pre-filled input.

Placeholder length is also constrained by the width of the input it is used in. This means important information may be truncated, especially if the user relies on an increased font size.

Additionally, activating an input that has a placeholder will cause the placeholder to disappear. If the placeholder contains important information, such as formatting requirements, it will no longer be able to be referenced. Compare this to a caption, which is always shown to the user.

Placeholder information also cannot contain interactive information such as support links, or buttons that trigger tooltips. Unlike a placeholder, a caption can contain these pieces of information.

placeholder attribute values can also factor into accessible name computation if a programatically associated label does not accompany the input. Although placeholder is not intended to be used this way, it can serve as last-ditch technique used by some assistive technology to try and determine the purpose of the input the placeholder declaraction is applied to. This can be confusing if the placeholder's content does not communicate the purpose of the input (ex: "No numbers or special characters").

Guidelines

For designers

Use techniques like explanatory paragraphs and input captions to explain the content in a way that is always visually persistent.

Also ensure a visible label for the input is also utilized, and that the label has a concise, descriptive name that communicates the input's purpose.

For engineers

Ensure that the label uses the label element, with a for attribute that references an id declared on the associated input.

The placeholder color value should also be controlled by a design token to ensure it visually renders appropriately across different themes.

Examples

Do

Use an input caption

A blank text input with a label that reads, 'Tracking code'. It also has a caption below it that reads, 'You can find the tracking code on the back of the package your device was mailed in.' The phrase 'back of the package' is styled to indicate that it is a link.
Don’t

Don't use multiple h1s, skip over heading hierarchy for visual effect, or forget to label sections of information with headings

A text input with a placeholder that reads, 'You can find the tracking code o'. The 'o' implies there is more content present, but it is being clipped by the input's width.

Additional resources