Floating Labels

Interactive examples of different label styles

Placeholder Text

One of the most common ways of labeling form inputs, placeholder text looks nice, but leaves the user without any context after the input is filled in.

Sign In

Label + Input

Adding a label above it's input solves the placeholder text problem, but is not without it's downsides. This method has the potential to result in much longer forms.

Sign In

The best of both worlds?

While this may look like placeholder text, floating labels allow us to animate the label above the input after text is populated. Go ahead and give it a try!

Sign In