Floating labels move above the input when a user types, creating a clean and minimal form design.
| Class Name | Type | Description |
|---|---|---|
| form-floating | Component | Floating label container |
The Floating Label component comes with two variations: Filled and Outlined
HTML
<div class="form-floating form-field">
<input type="text" id="floatingInputOutline" class="form-control" placeholder=" " />
<label class="form-label" for="floatingInputOutline">User Name</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInput" class="form-control-fill" placeholder=" " />
<label class="form-label" for="floatingInput">User Name</label>
</div>Icons can be placed at the start or end of the input field. Use .form-control-icon-start or .form-control-icon-end class to the icon.
HTML
<div class="input-group-icon">
<svg class="form-control-icon-start" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
<div class="form-floating form-field">
<input type="text" class="form-control" id="floatingLabelOutlineIcon" />
<label class="form-label" for="floatingLabelOutlineIcon">User Name</label>
</div>
</div>
<div class="input-group-icon">
<svg class="form-control-icon-start" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
<div class="form-floating form-field">
<input type="text" class="form-control-fill" id="floatingLabelIcon" placeholder=" " />
<label class="form-label" for="floatingLabelIcon">User Name</label>
</div>
</div>
<div class="input-group-icon">
<svg class="form-control-icon-end" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
<div class="form-floating form-field">
<input type="text" class="form-control" id="floatingLabelOutlineIconEnd" placeholder=" " />
<label class="form-label" for="floatingLabelOutlineIconEnd">User Name</label>
</div>
</div>
<div class="input-group-icon">
<svg class="form-control-icon-end" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"/></svg>
<div class="form-floating form-field">
<input type="text" class="form-control-fill" id="floatingLabelIconEnd" placeholder=" " />
<label class="form-label" for="floatingLabelIconEnd">User Name</label>
</div>
</div>HTML
<div class="form-floating form-field">
<textarea type="text" class="form-control" id="floatingTextareaOutline" placeholder=" "></textarea>
<label class="form-label" for="floatingTextareaOutline">Message</label>
</div>
<div class="form-floating form-field">
<textarea type="text" class="form-control-fill" id="floatingTextarea" placeholder=" "></textarea>
<label class="form-label" for="floatingTextarea">Message</label>
</div>HTML
<div class="form-floating form-field">
<select class="form-select-fill" aria-label="Filled floating label example">
<option selected>Select option</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="form-label" for="floatingInput">Options</label>
</div>
<div class="form-floating form-field">
<select class="form-select" aria-label="Outlined floating label example">
<option selected>Select option</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="form-label" for="floatingInput">Options</label>
</div>Set heights using classes like .form-control-sm and .form-control-lg to the <input> for small and large floating labels. Default is medium.
HTML
<div class="form-floating form-field">
<input type="text" id="floatingInputOutlineSmall" class="form-control form-control-sm" placeholder=" " />
<label class="form-label" for="floatingInputOutlineSmall">Size Small</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputOutlineMedium" class="form-control" placeholder=" " />
<label class="form-label" for="floatingInputOutlineMedium">Size Medium</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputOutlineLarge" class="form-control form-control-lg" placeholder=" " />
<label class="form-label" for="floatingInputOutlineLarge">Size Large</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputSmall" class="form-control-fill form-control-sm" placeholder=" " />
<label class="form-label" for="floatingInputSmall">Size Small</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputMedium" class="form-control-fill" placeholder=" " />
<label class="form-label" for="floatingInputMedium">Size Medium</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputLarge" class="form-control-fill form-control-lg" placeholder=" " />
<label class="form-label" for="floatingInputLarge">Size Large</label>
</div>Different colors become visible while the input is focused. By default, the input field uses the primary color. Use additional utility classes to modify the focus color. Like:
.form-control-secondary.form-control-successHTML
<div class="form-floating form-field">
<input type="text" id="outlineSecondary" class="form-control form-control-secondary" placeholder=" " />
<label class="form-label" for="outlineSecondary">User Name</label>
</div>
<div class="form-floating form-field">
<input type="text" id="outlineSuccess" class="form-control form-control-success" placeholder=" " />
<label class="form-label" for="outlineSuccess">User Name</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputSecondary" class="form-control-fill form-control-secondary" placeholder=" " />
<label class="form-label" for="floatingInputSecondary">User Name</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputSuccess" class="form-control-fill form-control-success" placeholder=" " />
<label class="form-label" for="floatingInputSuccess">User Name</label>
</div>Make input fields appear disabled by adding the disabled attribute.
HTML
<div class="form-floating form-field">
<input type="text" id="inputOutlineDisabled" class="form-control" placeholder=" " disabled />
<label class="form-label" for="inputOutlineDisabled">User Name</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputDisabled" class="form-control-fill" placeholder=" " disabled />
<label class="form-label" for="floatingInputDisabled">User Name</label>
</div>Indicate validation states by adding the .is-valid class for success state and .is-invalid class for error state to input fields.
HTML
<div class="form-floating form-field">
<input type="text" id="floatingInputOutline" class="form-control is-valid" value="Hello world" placeholder=" "/>
<label class="form-label" for="floatingInputOutline">User Name</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInput" class="form-control-fill is-valid" value="Hello world" placeholder=" " />
<label class="form-label" for="floatingInput">User Name</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInputOutline" class="form-control is-invalid" value="Hello world" placeholder=" "/>
<label class="form-label" for="floatingInputOutline">User Name</label>
</div>
<div class="form-floating form-field">
<input type="text" id="floatingInput" class="form-control-fill is-invalid" value="Hello world" placeholder=" " />
<label class="form-label" for="floatingInput">User Name</label>
</div>Additional CSS variables for floating labels:
.form-control-fill {
...
--floating-label-padding-top: --spacing(5.25);
--floating-label-padding-bottom: --spacing(1);
}
.form-select-fill {
...
--floating-label-padding-top: --spacing(5.25);
--floating-label-padding-bottom: --spacing(1);
}