Docs / Forms / Floating labels

Floating labels

A label that starts inside the field as a placeholder and animates up to the top edge once the control is focused or filled. Wrap a single control in FloatingLabel and pass the label — it wires the label’s htmlFor to the control’s id for you.

Import

import { FloatingLabel, FormControl } from '@metatoy/bootstrap-styled';

Inputs

Pass exactly one control as the child. FloatingLabel injects the placeholder and id it needs — you don’t set placeholder yourself. A pre-filled value keeps the label raised.

Textareas & selects

The same wrapper works for FormControl as="textarea" and for FormSelect. A select always shows its label floated, since it never has an empty placeholder state.

Filled & disabled

Provide controlId to set an explicit id (otherwise one is generated). A disabled control is styled muted; a value keeps the label in its raised position.

Props

FloatingLabel

FloatingLabel also accepts all native <div> attributes except children, which is typed to a single control element. The child must be a FormControl, FormControl as="textarea", or FormSelect.

Theming

The floating wrapper reads --bs-body-bg (so the label’s floated background matches the field), --bs-body-color-rgb for the muted label text, --bs-border-radius, and --bs-border-width. The underlying control keeps its own form-control tokens. Scope the variables inline to reshade one field:

<div style={{ '--bs-body-bg': '#0b1020', '--bs-body-color-rgb': '226, 232, 240' }}>
<FloatingLabel label="Email address">
  <FormControl type="email" />
</FloatingLabel>
</div>

Accessibility

The label is a real <label> element tied to the control by htmlFor/id, so it is announced as the control’s accessible name — no extra aria-label needed. Because the visible label doubles as the placeholder, keep it a concise field name rather than instructional text; put longer guidance in adjacent help text.

Explore in Ladle

Open in Ladle