What is placeholder text in UX design?
Placeholder text is the temporary text displayed inside an HTML input field or textarea before the user enters content. It is defined by the HTML placeholder attribute and typically appears in a lighter color than actual input text to distinguish it visually. Placeholder text disappears as soon as the user begins typing, which is both its defining characteristic and the source of its most significant usability problem.
Why should placeholder text not replace field labels?
Using placeholder text as the only label for a form field is one of the most persistent and well-documented usability mistakes in form design. When users begin typing, the placeholder disappears and they can no longer see what the field requires. This forces users to delete their input to check the label, rely on memory for complex or format-specific fields, or accept uncertainty about whether they are entering the right information. This increases cognitive load and error rates, particularly for users with cognitive differences, older users, and users filling out long forms where they may lose track of context. Every major usability authority including the Nielsen Norman Group and Baymard Institute recommends against using placeholders as labels.
How should placeholder text be used correctly?
Placeholder text works appropriately as a supplement to a visible label, not a replacement. Use it to show an example of the expected format, such as "DD/MM/YYYY" in a date field, or to provide a hint about the scope of a search field. Keep placeholder text brief and ensure it does not look like pre-filled content that users might mistake for an actual value. Ensure placeholder text meets color contrast requirements, noting that WCAG requires a 4.5:1 contrast ratio for text, though browsers often render placeholder text at lower contrast by default, requiring explicit CSS overrides.