Floating Labels 1.2.2

Create beautifully animated form labels that float above the input when focused or filled using .velin-float-label. Deutsch: Schwebende Labels

Maturity: .velin-float-label is stable CSS in 1.2.0. Prefer static labels when clarity beats density.

When to use

Compact login or marketing forms where a floating caption saves vertical space.
Inputs that can keep a space placeholder=" " so the CSS :placeholder-shown trigger works.
Pair with .velin-input / .velin-select / .velin-textarea and a .velin-label sibling after the control.

When not

Long forms, complex instructions, or fields that need persistent visible labels above the control.
Do not omit for/id — floating is visual only; the accessible name still comes from the label.
Do not use floating labels as a substitute for error text — still use validation / form-summary.

Basic example

Wrap an input and label inside .velin-float-label. The input must come before the label, and a placeholder attribute is required (it can be a space).

Email address

Password

<div class="velin-float-label">
  <input type="email" class="velin-input" id="email" placeholder=" ">
  <label class="velin-label" for="email">Email address</label>
</div>

<div class="velin-float-label">
  <input type="password" class="velin-input" id="password" placeholder=" ">
  <label class="velin-label" for="password">Password</label>
</div>

Textarea

Floating labels also work with <textarea> elements.

Your message

<div class="velin-float-label">
  <textarea class="velin-input" id="msg" placeholder=" " rows="3"></textarea>
  <label class="velin-label" for="msg">Your message</label>
</div>

Select

Use with .velin-select for floating-label selects.

Category

<div class="velin-float-label">
  <select class="velin-select" id="category">
    <option selected>Choose…</option>
    <option value="1">Option 1</option>
  </select>
  <label class="velin-label" for="category">Category</label>
</div>

Keep a real <label class="velin-label"> associated with the control — motion of the caption is not the accessible name by itself.
Respect prefers-reduced-motion; floating transitions should not be the only cue for focus.
Errors still need text + aria-invalid via Validation.

Form control · Overview · Layout
Validation · Form summary