Ghost Text
Last updated: September 14, 2015 at 13:42 pm

A line of instructional copy inside a form field which disappears when the user activates that field and/or begins entering data.

Visual example of the element:

What problem does this element or pattern solve?
Most frequently, ghost text provides a hint regarding the proper response or formatting of input.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Will your text fields contain ghost text? If so, all fields or only some? If not all fields, what are the rules surrounding its proper use? (For example, it may be used only for input formatting hints such as phone numbers, etc.)
  • Provide details on the visual styling for your ghost text: Font, size, style, color and padding.
  • Address any accessibility issues.
  • Discuss the behavior of your ghost text. If the user begins typing and the ghost text disappears, does it reappear if the user deletes their response and moves to another field? Or does it reappear in blank fields only after a screen refresh?
  • If you have other standards that could be used instead of ghost text, such as tool tips or secondary field labels with descriptive information, carefully define which standard should be used under various circumstances and provide cross links.

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
form label inside the field, hints inside form fields, default value, placeholder, informational text, ghost instructions, vanishing label
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply