FloatLabel

When to use

Wraps an input so the label floats above when focused or filled. Saves vertical space but reduces scannability, so use sparingly.

Guidelines

• Reduces scannability: Users cannot scan filled fields because labels and values overlap visually.
• Best for short forms: Login, search, or 2 to 3 field forms where space is tight.
• Avoid for long forms: Static labels above inputs are easier to scan.

How it works