Bootstrap 5 Floating Labels
Floating labels
Create beautifully simple form labels that float over your input fields.
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
Example
Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with CoreUI for Bootstrap’s textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>When there’s a value already defined, <label>s will automatically adjust to their floated position.
<form class="form-floating">
<input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputValue">Input with value</label>
</form>Form validation styles also work as expected.
<form class="form-floating">
<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputInvalid">Invalid input</label>
</form>Textareas
By default, <textarea>s with .form-control will be the same height as <input>s.
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>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).
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>Selects
Other than .form-control, floating labels are only available on .form-selects. They work in the same way, but unlike <input>s, they’ll always show the <label> in its floated state. Selects with size and multiple are not supported.
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>Disabled
Add the disabled boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">Email address</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea>
<label for="floatingTextareaDisabled">Comments</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled>Disabled textarea with some text inside</textarea>
<label for="floatingTextarea2Disabled">Comments</label>
</div>
<div class="form-floating">
<select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectDisabled">Works with selects</label>
</div>Readonly plaintext
Floating labels also support .form-control-plaintext, which can be helpful for toggling from an editable <input> to a plaintext value without affecting the page layout.
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
<label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
<label for="floatingPlaintextInput">Input with value</label>
</div>Layout
When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>Customizing
SASS variables
$form-floating-height: add(3.5rem, $input-height-border);
$form-floating-line-height: 1.25;
$form-floating-padding-x: $input-padding-x;
$form-floating-padding-y: 1rem;
$form-floating-input-padding-t: 1.625rem;
$form-floating-input-padding-b: .625rem;
$form-floating-label-height: 1.5em;
$form-floating-label-opacity: .65;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-label-disabled-color: $gray-600;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out;