The floated state must not be mistaken for a placeholder

What it is

The empty state of a floating label and a placeholder are both pale type inside the slot. If the floated name, a hint that remains inside, and the actual value cannot be told apart, people treat the name as an example or the example as a filled value. Float-versus-placeholder distinction requires three stable layers: the name ends outside the slot; a placeholder, if used at all, appears only when empty and unfocused and never floats; the value is the only solid text inside.

Why it happens

A slot can host up to three strings: the name about to float, an extra format example, and user input. Vision assigns them roles by position and contrast. If the example stays inside after the name has floated, and size and color stay close, roles cross: the small type is taken as a hint and the pale inner string as the name, or the reverse. Worse, name and placeholder use the same string—empty state shows “Mobile” once, focus shows “Mobile” again on the rim, with the same sentence flashing in between—so nobody can tell which pass is identity and which is an example. When distinction fails, the floating label does not fix the placeholder problem; it adds a second layer of moving pale type.

Where it stops holding

Using only the floating name and no placeholder makes the slot empty after focus, so distinction is light: the empty-state name just must not look like a filled value. A search box whose inner text is always a hint and whose name lives on a button is not a floating label; using it as a control comparison misleads. Autofill values often carry a yellow wash and already differ from a pale placeholder; failed autofill that leaves the placeholder then collides with an unfloated name. During the animation the name and placeholder can cross on the same path for one frame; at low frame rates that frame reads as a double image.

Applying it

• Pick one empty in-slot string: either the name that will float, or an example that will not. Do not put both inside at once.
• After the float, keep the name out of the slot, with color and weight distinct from the value and from any leftover hint.
• If a format example is required, put it in persistent copy outside the slot; do not leave it under the caret after the name has moved.
• Verify with three stills—empty, focused with no input, filled—and ask people new to the page which sentence is the field name, which is an example, and which is the value. Any mismatch means the three inks are still fused.

Related

• Within the group: E2.05.1 A floating label uses motion to trade space against persistence · E2.05.2 The shrunk floated type may fall below a readable size
• Adjacent: E2.04 Placeholders · E2.06 Format hints and examples
• Search terms: float-versus-placeholder distinction · floating label · hint versus value