Placeholder

People stall in front of a field that carries nothing but a label. "Phone number" doesn't say whether to include the dashes or the country code. Half the entries come in with dashes and half without, and anyone who guesses wrong on a validated field gets bounced back to a red line of text instead of the next screen.

Adding an explanation fixes that and costs something. On a sign-up form with twelve fields, a label plus a hint under each one doubles the height of the page, and on a small screen the submit button ends up three scrolls down. Longer forms lose more people partway through.

So designers started using the empty space inside the field. It's unoccupied anyway, so a faint example there adds not a single line to the page while telling the user what to write. The catch is what happens next: the text disappears the moment typing starts. The space was borrowed, and the price is that whatever you put there is gone exactly when someone is filling the field in.

It shows only while the field is empty and vanishes at the first character typed. It's drawn in a grey lighter than body text so that it reads as a suggestion rather than as a value the user already entered.

That one property — it disappears — sets every rule about what belongs here. Nothing needed during typing can live in this slot. Sorting what belongs from what doesn't gives four rules.

1. Put an example of the value, and nothing else. A phone field gets 010-1234-5678, an email field gets name@company.com — one complete specimen of the shape. The point of this slot is that someone recognizes a format by seeing it instead of reading a sentence about it.
2. Don't use it as the label. The name of the field belongs above it, outside the box. Put the name inside and it's gone the instant typing begins; by the time all twelve fields are filled, whoever reviews the form is reading values with no idea which is which.
3. Don't put format rules here. "At least 8 characters, including a number" is a sentence someone needs while typing. In a slot that disappears, only people who memorized the rule get through. Rules belong under the field, permanently visible.
4. Don't mark required fields here either. It's visible only while the field is empty, so the person about to submit a blank field has already lost it.

There's an accessibility problem as well. A screen reader, the software that reads a screen aloud, may not announce what a field is for when the only text is a placeholder, which leaves a form of unnamed boxes. The faint grey causes its own trouble: the brightness difference against the background is small enough that low-vision users see an empty field. Both of these come up regularly in accessibility reviews, the practice of making a product usable regardless of disability or circumstance.

The place to use it is a field where the value has more than one plausible shape. Phone numbers, dates, and amounts can all be written several ways, and one example cuts the error rate sharply. The target is a text input that takes typed characters; a control where you pick from a list has no need for one.

Search fields are the other common home, and there the text shows scope rather than format. "Search document titles and contents" stops a user from assuming only titles are searched and giving up. Long freeform fields work the same way. Put Feb 3 planning meeting in a meeting-notes title field and most people will follow that shape without being told to.

The larger point is how many fields shouldn't have one. Names and email addresses are adequately explained by their labels. Fill every field with an example and twelve lines of grey text pile up, leaving the eye nowhere to settle and making the form look busier than the version with no hints at all. Short strings scattered through a product — a word on a button, a line under a field — are microcopy, and this particular slot is one to fill only when there's a clear reason.

"We dropped the labels and used placeholders instead, but once you start typing you can't tell what field you're in."

Space was saved by moving the label inside, and it broke at the review step.

"Going any lighter fails the contrast requirement. Moving the label out is the real fix."

This isn't a problem to solve by adjusting a color; the structure has to change.

"We put the password rules in there and they're invisible exactly when you're typing."

A sentence people need while working was placed in a slot that disappears.

Noa hit this on the Pagedeck sign-up form. Trying to keep the page short, every label went inside its field, and in usability testing two of five people backed out of the final review screen because they couldn't tell which box held the work email and which held the personal one.

Noa moved the labels back above the fields and left only examples inside. The page grew to about a screen and a half, and the share of people abandoning it partway went down rather than up. Mia wrote the conclusion down: on a form, not having to ask again matters more than being short. The team's form pattern has kept the label outside the box ever since.

The most common mistake is believing it can replace a label. A name sitting inside the box looks tidy, and in a design mockup only the empty state is on display, so nothing appears wrong. In use, the field loses its name the moment typing starts. Someone going back to correct one entry has to count fields to work out which is which, and someone using a screen reader gets twelve unnamed boxes. The tidier screen costs more time than the label ever took.

The other frequent belief is that fainter is better, since it reads more clearly as a suggestion. Wanting to distinguish it from a real value is the right instinct. But keep reducing the brightness difference and at some point it crosses the accessibility threshold, and past that line a low-vision user sees no difference between the hint and an empty box. Distinguishing the two doesn't have to be done with color alone — put the label outside and the confusion between value and example largely stops happening, which lets the grey stay light enough to read as a hint.