Bootstrap 5 Floating Labels
Floating labels
Create beautifully simple form labels that float over your input fields.
🤖 Looking for the LLM-optimized version?View llm.md
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. Aplaceholder 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.,~).
<divclass="form-floating mb-3"><inputtype="email"class="form-control"id="floatingInput"placeholder="[email protected]"><labelfor="floatingInput">Email address</label></div><divclass="form-floating"><inputtype="password"class="form-control"id="floatingPassword"placeholder="Password"><labelfor="floatingPassword">Password</label></div>When there’s avalue already defined,<label>s will automatically adjust to their floated position.
<formclass="form-floating"><inputtype="email"class="form-control"id="floatingInputValue"placeholder="[email protected]"value="[email protected]"><labelfor="floatingInputValue">Input with value</label></form>Form validation styles also work as expected.
<formclass="form-floating"><inputtype="email"class="form-control is-invalid"id="floatingInputInvalid"placeholder="[email protected]"value="[email protected]"><labelfor="floatingInputInvalid">Invalid input</label></form>Textareas
By default,<textarea>s with.form-control will be the same height as<input>s.
<divclass="form-floating"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea"></textarea><labelfor="floatingTextarea">Comments</label></div>To set a custom height on your<textarea>, do not use therows attribute. Instead, set an explicitheight (either inline or via custom CSS).
<divclass="form-floating"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea2"style="height: 100px"></textarea><labelfor="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 withsize andmultiple are not supported.
<divclass="form-floating"><selectclass="form-select"id="floatingSelect"aria-label="Floating label select example"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelfor="floatingSelect">Works with selects</label></div>Disabled
Add thedisabled boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing.
<divclass="form-floating mb-3"><inputtype="email"class="form-control"id="floatingInputDisabled"placeholder="[email protected]"disabled><labelfor="floatingInputDisabled">Email address</label></div><divclass="form-floating mb-3"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextareaDisabled"disabled></textarea><labelfor="floatingTextareaDisabled">Comments</label></div><divclass="form-floating mb-3"><textareaclass="form-control"placeholder="Leave a comment here"id="floatingTextarea2Disabled"style="height: 100px"disabled>Disabled textarea with some text inside</textarea><labelfor="floatingTextarea2Disabled">Comments</label></div><divclass="form-floating"><selectclass="form-select"id="floatingSelectDisabled"aria-label="Floating label disabled select example"disabled><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelfor="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.
<divclass="form-floating mb-3"><inputtype="email"readonlyclass="form-control-plaintext"id="floatingEmptyPlaintextInput"placeholder="[email protected]"><labelfor="floatingEmptyPlaintextInput">Empty input</label></div><divclass="form-floating mb-3"><inputtype="email"readonlyclass="form-control-plaintext"id="floatingPlaintextInput"placeholder="[email protected]"value="[email protected]"><labelfor="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.
<divclass="row g-2"><divclass="col-md"><divclass="form-floating"><inputtype="email"class="form-control"id="floatingInputGrid"placeholder="[email protected]"value="[email protected]"><labelfor="floatingInputGrid">Email address</label></div></div><divclass="col-md"><divclass="form-floating"><selectclass="form-select"id="floatingSelectGrid"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelfor="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.1sease-in-out,transform.1sease-in-out;