Floating Labels

Floating Labels

Floating labels place the label inside the control initially and move it above the value when the field is focused or populated.

Core concept

Explain the required markup order, placeholder requirement, supported controls, and how the CSS uses the placeholder state to position the label.

Using it in a real interface

Build a login form with floating email and password labels. Explain why the placeholder attribute is part of the component\'s CSS mechanism even though the visible label is supplied separately.

Implementation notes

Test floating labels with autofill, long translated labels, validation messages, and different input values. A pattern that looks good in a mockup can fail with real content.