Advance Form UI

Create beautifully simple form labels that float over your input fields.

Custom Form controls

Use .form-control-line.

Floating labels

Wrap a <Form.Control> element in <FloatingLabel> to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <Form.Control> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.

Preview

Jsx

Input

Flaoting label Input

Textarea

Flaoting label Textarea

Select

Works with selects

Value predefined

Input with value

Validation

Invalid input

Custom Form controls
Floating labels