Floating Label

A floating label is a label that belongs to an input field. As long as the input field is inactive and empty, the label appears as a placeholder in the input. As soon as the input field is active (the cursor is in the field) or there is text in the field, the label is moved over the input field as label.

A space above the input field is always reserved for the moving label.

The following code examples shows how to use floating label:

<div class="floating-label">
  <input type="text" class="input" id="example" placeholder="x">
  <label class="floating-label__label" for="example">I am a label</label>
</div>

The following list describe all existing block/element/modifier classes of the component.

• .floating-label - required the block class, the order of the inner input and label is predetermined and may not be changed
• input[type="text"] - required the input within the floating-label must have the attribute [id] that matches the [for] attribute of the label, also must have a attribute [placeholder="x"]
• .floating-label__label - required contains the label/placeholder text, must have the [for] attribute that matches the [id] from the input
• Modifier
  • .floating-label--stretch use width 100%
  • .floating-label--stretch-{SCREEN_SIZE} width 100% until the screen size
  • .floating-label--scale-{SCALE} scale the size of the input
  • .floating-label--scale-{SCALE}-{SCREEN_SIZE} scale until the screen size

The variables are:

• SCREEN_SIZE lg, md, sm, xs
• SCALE x0.750, x0.875, x1.000, x1.125, x1.250, x1.375, x1.500

Basic Example:

Floating Labels + Form Notes

You can combine the floating label wit an form-note, but only with form note within an input.

The HTML is slightly different, the label of the floating label must be a direct child of the .input

<div class="floating-label">
  <div class="form-note form-note--info">
    <input type="text" class="input" id="example" placeholder="x">
    <label class="floating-label__label" for="example">Hello World</label> <!-- change position directly after input -->
    <label class="form-note__info" for="example">Info Label</label>
  </div>
</div>

A space above and below the input field is always reserved for the label and note.

You can also combine a complex valid/invalid state. The following example shows how to create this CSS only valid/invalid states with a floating label and a form note.

Modifier

A floating label can be customized using class modifiers. The following sub-chapters list all existing classes of floating label modifier.

Scale

An floating label with this modifier scale the complete component.

The values are to be interpreted as percentages, i.e. a .floating-label--scaling-x0.875 floating label is smaller as the normal floating label, while a .floating-label--scaling-x1.500 is larger.

DEPRECATED the old {SCALE} values were 0750, 0875, 1000, 1125, 1250, 1375, 1500

Stretch

The following examples show the stretched floating label.