Floating labels

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

Basic

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.

<Form>
<FloatingLabel
controlId="floatingInput"
label="Email address"
className="mb-3"
>
<Form.Control type="email" placeholder="name@example.com" />
</FloatingLabel>
<FloatingLabel controlId="floatingPassword" label="Password">
<Form.Control type="password" placeholder="Password" />
</FloatingLabel>
</Form>

Textareas

By default, <textarea>s will be the same height as <input>s. To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

<Form>
<FloatingLabel controlId="floatingTextarea" label="Comments" className="mb-3">
<Form.Control as="textarea" placeholder="Leave a comment here" />
</FloatingLabel>
<FloatingLabel controlId="floatingTextarea2" label="Comments">
<Form.Control
as="textarea"
placeholder="Leave a comment here"
style={{ height: '100px' }}
/>
</FloatingLabel>
</Form>

Selects

Other than <Form.Control>, floating labels are only available on <Form.Select>s. They work in the same way, but unlike <input>s, they’ll always show the <label> in its floated state.

<Form>
<FloatingLabel controlId="floatingSelect" label="Works with selects">
<Form.Select aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</FloatingLabel>
</Form>

Layout

When working with the Bootstrap grid system, be sure to place form elements within column classes.

<FloatingLabel controlId="floatingSelectGrid" label="Works with selects">
<Form.Select aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</FloatingLabel>

Customizing rendering

If you need greater control over the rendering, use the <FormFloating> component to wrap your input and label. Also note that the <Form.Control> must come first so we can utilize a sibling selector (e.g., ~).

<Form>
<Form.Floating className="mb-3">
<Form.Control
id="floatingInputCustom"
type="email"
placeholder="name@example.com"
/>
<label htmlFor="floatingInputCustom">Email address</label>
</Form.Floating>
<Form.Floating>
<Form.Control
id="floatingPasswordCustom"
type="password"
placeholder="Password"
/>
<label htmlFor="floatingPasswordCustom">Password</label>
</Form.Floating>
</Form>