Floating label input

@summonware/ui · form-floating · P1 · Forms

Usage

A text input whose label sits inside the field and rises above the value once there is one. It buys vertical space in dense forms and keeps the label visible after typing, which a placeholder-as-label never does. The transition is driven by `peer-placeholder-shown` — pure CSS, no state.

import { Floatinglabelinput } from '@summonware/ui';

Best practices

DoUse it consistently within a form. Mixing floating and stacked labels in one column reads as a mistake.

DoKeep labels short. A floating label has the width of the field and cannot wrap.

Don'tCombine a floating label with a placeholder. The placeholder slot is what drives the animation.

Don'tReach for this by default. A stacked label is easier to scan; floating labels are for genuinely tight layouts.

Examples

Common configurations, variations and states.

Empty and errored

Full name

Enter a valid email

The first field is empty so its label sits inline; the second carries an error and shows the label floated.

Dense form

Address line 1

Address line 2

City

Postcode

Four fields in the vertical space a stacked-label form would spend on three. This is the case the component exists for.

Reference variants

1 of 3 labels from the reference are demonstrated above.

Floating labelsTextareasSelect