Floating label

The FloatingLabel component provides Bootstrap floating label support for form controls. It automatically connects the label with the wrapped control, generates a unique id when needed, and preserves all utility props inherited from the Prime component.

The wrapped control must support the id and placeholder attributes for Bootstrap floating labels to work correctly.

Import

import { Form } from "@promethey/bsui";

Note

FloatingLabel inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Text Input

FloatingLabel works with regular text inputs.

Password

Use type="password" for password fields.

Custom ID

The component automatically generates an identifier using useId. You can provide your own id when required.

Multiple Controls

Each control receives its own generated identifier.

API

FloatingLabel

Prop	Type	Default	Description
children	ReactElement	—	Form control rendered inside the component.
label	string	—	Text displayed as the floating label.
className	string | object	null	Additional CSS classes.
style	object	null	Inline styles applied to the root element.

Behavior

Automatic ID Generation

If the wrapped control does not have an id, FloatingLabel generates one automatically using React's useId hook.