Floating Labels

Adding .floating-label to .group enables a label that rests inside the control as a placeholder and floats above it when the field is focused or contains a value.

The technique uses :placeholder-shown to detect whether the field is empty, so inputs and textareas must always have a placeholder attribute — even if it is a single space.

Input

The label starts at rest position (inside the field, styled like a placeholder) and transitions upward on focus or when a value is present.

<div class="group floating-label">
  <input class="form-input" id="fl-email" type="email" placeholder="Email address">
  <label for="fl-email">Email address</label>
</div>

<div class="group floating-label">
  <input class="form-input" id="fl-name" type="text" placeholder="Full name">
  <label for="fl-name">Full name</label>
</div>

Email address

Full name

Textarea

Floating labels work on textareas as well. The label floats above the top-left corner when the textarea is focused or has content.

<div class="group floating-label">
  <textarea class="form-textarea" id="fl-message" placeholder="Message"></textarea>
  <label for="fl-message">Message</label>
</div>

Message

Select

In the selected controls, there is no :placeholder-shown state, so the JS side is essential to keep the label in a persistent state. For the JS code to work, if you are using a form, or simply a single select, it is sufficient to set the parent element of the select to fa-component="form". The JS will handle the rest.

<div class="group floating-label">
  <select class="form-select" id="fl-department">
    <option value="">Select department</option>
    <option>Engineering</option>
    <option>Design</option>
    <option>Marketing</option>
    <option>Support</option>
  </select>
</div>

Autofill

When a browser autofills a field, the label automatically floats above so it does not overlap the filled value. The -webkit-autofill pseudo-class is handled in the CSS.

Notes

Always provide a placeholder attribute on .form-input and .form-textarea inside .floating-label. The label position is driven by :placeholder-shown — without a placeholder the label never floats back down after focus.

For select controls, manage label visibility through JavaScript by toggling .floating-label-visible and .floating-label-hidden based on the selected value.