Placeholder Text
Hint text shown inside a form input before the user types, describing the expected input.
Plain English
Placeholder text is the faint hint inside an empty input field — it disappears the moment you start typing. Its job is to clarify what kind of input is expected. The most common misuse is using placeholder text as the field label — when users start typing, the label vanishes and they forget what the field was asking for. Always use a real label above the field and use placeholder text only for format hints.
Technical
Styled with the ::placeholder pseudo-element in CSS. Browsers default to about 40% opacity on the input's color. The WCAG guideline for placeholder contrast is 3:1 against the background (lower than the 4.5:1 required for normal text) because placeholders are hints, not content. Placeholder text should never be the sole label — use label elements for accessibility.
Live Demo
Placeholder as label
- ✕No visible label — disappears on type
- ✕Verbose placeholder text is hard to scan
- ✕User forgets what field asked for
Label + short placeholder
- ✓Persistent label always visible
- ✓Short placeholder shows expected format
- ✓Accessible — label tied to input via htmlFor
Placeholders disappear. Always use a visible label above the input.
Usage
✓ Good usage
Add placeholder="e.g. jane@acme.com" below a visible "Email address" label to show the expected format without replacing the label.
✗ Bad usage
Using placeholder="Email address" with no visible label — the user forgets what the field asks for the moment they start typing.
Recommended values
- color: use ink-400 or equivalent muted shade (3:1 contrast minimum)
- font-style: italic is conventional but not required
- Content: format hint only — "e.g. john@example.com" not a label like "Email"
- Never use placeholder as a substitute for a visible label
Common mistakes
- Using placeholder as the field label — fails accessibility and UX once the user starts typing.
- Low-contrast placeholder text that is nearly invisible.
- Long instructions as placeholder text — use help text below the input instead.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Every input must have a visible label element above it. Use placeholder text only for format hints (e.g. "e.g. +1 555 000 0000"). Style placeholder in muted ink-400 at 90% opacity.