Placeholders and ellipses

Placeholders show an example ending in …; loading labels end in … too.

Web Interface Guidelinesvercel-labs · README.md
**Placeholders signal emptiness.** End with an ellipsis. **Placeholder value.** Set placeholder to an example value or pattern e.g., `+1 (123) 456-7890` & `sk-012345679…`
FormsView source ↗
Web Interface Guidelinesvercel-labs · README.md
**Use the ellipsis character.** `…` over three periods `...`. **Ellipsis for further input & loading states.** Menu options that open a follow-up e.g., "Rename…" & loading/processing states e.g., "Loading…", "Saving…", "Generating…" end with an ellipsis.
Content & interactionsView source ↗

From web-design-guidelines (Web Interface Guidelines).

Show the format

Fill both forms; press Enter or Tab to submit.

InstructionsBad

0/3 · 0 rejected
Example placeholdersGood

0/3 · 0 rejected
<label for="start">Start date</label>
<input id="start" name="start-date" inputmode="numeric"
       autocomplete="off" placeholder="31/12/2026…">

<label for="key">API key</label>
<input id="key" name="api-key" spellcheck="false"
       autocomplete="off" placeholder="sk-a1b2c3d4…">

One glyph, not three

Drag the size and switch fonts.

Three periods ...Bad

3 chars
Ellipsis … (U+2026)Good

1 char
<button aria-busy="true">Saving…</button>

Loading and follow-up labels

Click Save, then Rename and Duplicate, in both.

Vague labelsBad
q3-report.pdf

"Loading..."
Say what happensGood
q3-report.pdf

"Saving…"
<button>Rename…</button>
<button>Duplicate</button>

<button aria-busy="true" disabled>
  <span class="spinner" aria-hidden="true"></span>Saving…
</button>

.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }
.stack .busy { visibility: hidden; }
[aria-busy="true"] .stack .idle { visibility: hidden; }
[aria-busy="true"] .stack .busy { visibility: visible; }

Why it matters, pros and cons

Why it matters

A placeholder vanishes on the first keystroke, so show a valid answer.

Pros

  • The format is known before typing.
  • An example ending in … never looks filled.
  • One glyph: tighter spacing, one cursor step.

Cons

  • A placeholder is not a label; keep a visible one.
  • Keep ... where it is syntax: spreads, ranges, CLI.
  • The glyph is hard to type; enforce it with lint.