<?xml version="1.0" encoding="utf-8"?>

Keep labels visible

Keep labels visible Bad Practice
Keep labels visible Best Practice

In space-limited designs, placing labels above inputs may not be possible. Is there another way to keep labels visible within inputs?

Using placeholders instead of labels isn’t ideal. When users click an input, the placeholder disappears, making it hard to remember what information is needed, especially if they leave and return later. They would have to tap outside the input to see the placeholder again, which adds unnecessary steps.

Floating labels address this issue. They move above the input when users click it, keeping the label visible at all times without adding extra steps or causing confusion, even if users leave and return to the page.

Improve your UX & Product skills with interactive courses that actually work