Floating labels appear to sit inside the textbox when it has no value or focus, and sit above the textbox otherwise.

Floating Label with no Value

If the textbox has no value, the label can be positioned inside the textbox.

Floating Label with Value

If the textbox has a value, the label must be positioned above the textbox.

Large floating label

Floating Label with Disabled Textbox

Use the disabled property & floating-label__label--disabled modifier on the input element and the label element respectively to disable the input.

Floating Label with Placeholder

The placeholder should only be shown when the textbox is focused and there is no text

Floating Label with Invalid Textbox

Set the aria-invalid property to true and add floating-label__label--invalid to the label to semantically and visually highlight the invalid state.

Floating Label with Textarea

Use the textarea tag for a multi-line textbox.

A multi-line textbox allows line breaks and has a minimum height of 200px.

In order to prevent overlap for floating label, use .floating-label--opaque class

Floating label with Combobox

Use the textarea tag for a multi-line textbox.

A multi-line textbox allows line breaks and has a minimum height of 200px.

Floating Label with long text

This example shows how the floating label will truncate with long text

Floating Label with select

Floating Label with large select

Floating Label with Phone input

For phone input, the label always remains in floating state above the input. This state ensures that the label does not obscure the phone number.

Floating Label Transitions

By default, with only the base markup shown above, the label remains in a floating state above the input. This default state ensures that the label does not obscure the textbox value while we wait for JavaScript.

When JavaScript is ready, the label can be re-positioned inside the textbox by adding the floating-label__label--inline modifier class. By default, this re-positioning of label happens instantly, without a transition. Typically, we do not want to show transitions on the initial page render, as this might be too jarring and distracting for some users.

You will also need to add the floating-label__label--focus class when the input recieves focus and remove it when the input loses focus. This is to ensure the right colors are applied to the label when focusing the input.

To opt into transitions after the initial render is complete, add the floating-label__label--animate modifier when the textbox receives focus.

The examples above use makeup-floating-label, a simple JavaScript module that adds the aforementioned logic. Feel free to use this module or use it as the basis to roll your own.