Placeholder

You might say

The email placeholder should read you@example.com, and the "Email" label must stay visible—not placeholder-only.

A placeholder is the gray example inside an input box showing the expected format; it vanishes the moment you type.The gray you@example.com in an email box demonstrates "fill it like this" and steps aside at the first keystroke. It splits the job with the label: the label sits beside the box and stays, while the placeholder only opens the show—once typing starts, only the label tells you what the field is.

Know first

Input Label

One input box, three moments

Label + placeholder (correct)

you@example.com

Gray example shows the format

Placeholder only, no label

you@example.com

Looks fine…

The label stays; the placeholder only opensPlaceholder text cannot replace the label or carry "required" rules.

Its job versus the label's

Demonstrating format: The best placeholders show format: a gray 2026-03-12 in a date box or you@example.com in an email box tells the shape at a glance.

Not carrying explanations: The placeholder vanishes once typing starts. If the field's meaning lives only in the placeholder, it is forgotten halfway—that job belongs to the label.

Not a required marker: "Required" needs a star or explicit text by the label; users routinely skip gray example text, so rules cannot live there.

Quick checkChoose the best answer

When the user starts typing, which of these disappears?

The gray example text inside the boxThe "Email" label beside the boxNeither disappears

You can say this to an AI Agent

Give every input a permanently visible label; use placeholder text only to demonstrate format, like you@example.com in the email box. After filling in, I should still tell what each field is.

Learn next

1Label→2Input→3Validation→