A floating label uses motion to trade space against persistence
Aliases: float label pattern · inward-to-outward label · animated label
What it is
A floating label puts the name inside the slot when the field is empty, then moves it outside and above with a short animation once the field is focused or filled, and keeps it there. It tries to do two jobs at once: occupy no extra row when empty, yet not lose the name when there is a value. Motion is how space and persistence are negotiated—not shrinking type, and not leaving a second hint string inside the slot.
Why it happens
A persistent top label costs a row of height; a placeholder-as-name does not persist. The floating label makes position a function of state: empty → inside; focused or filled → outside. The motion exists so two appearances of the same string are seen as one object relocating, not as “the inner hint vanished and a small caption appeared elsewhere.” If the displacement is too short or discontinuous, relocation fails: people think the name was lost, or that the small type above belongs to another field. Empty forms look denser; filled forms still have a name outside the slot to check against. The contradiction is not gone; it is bridged in time.
Studying it
Compare static top labels, placeholder-only, and a displacing floating label. Measure fields per screen on the empty form, accuracy at naming fields halfway through, and whether first focus is understood as “the type will go up.” Factors: duration and path, whether focus alone floats (before any character), whether the empty-state name looks like a value. Outcomes: identity kept, time, empty slots skipped as filled. Eye tracking can show whether gaze follows the string at the float. Do not replace “after filling, can they still name each cell” with “looks modern.”
Where it stops holding
When motion is off (reduce-motion, dropped frames), the name teleports or pops, the relocation story dies, and a small caption simply appears. Return visits with values already present (edit-profile) open in the floated state; those users never saw the in-slot act, so the motion story does not exist for them. On a tall textarea the floated name marks only the top, far from a caret at the bottom. Screen readers do not consume the displacement; floating is a visual-user phenomenon.
Applying it
- Move the name along a short continuous path from inside to outside, long enough to read as relocation, not as a cut to a new row.
- Float on focus, not on the first character: otherwise the caret is already in the slot under the name.
- When reduce-motion is on, provide the equivalent states without a tween: name inside if empty, outside if filled, with no blank frame between.
- Verify by having people fill a page and then point to each field’s name. A miss or a neighbor means the motion did not keep one object. Repeat with reduce-motion on.