Bootstrap 5 Floating labels Selects

The Bootstrap 5  Floating labels Component Selects is used to give a floating label to input fields. It also works with the HTML 5 <select> component. When we apply a floating label to the select component the label will always be shown in the floating state irrespective of the state of the select. The floating labels do not work with the size and multiple variations of the select element. However, they support the disabled select element.

Bootstrap 5  Floating labels Component Selects classes:

• form-select: This class is used to trigger the select option styles of Bootstrap 5.

Bootstrap 5  Floating labels Component Selects attributes:

• selected: This attribute is used to select an option from the select menu by default.
• for='floatingSelect': This attribute is used to show a floating label to the select. This attribute works only with the selects.

Syntax:

<div class="form-floating">
 <select id="gfg" class="form-select">
 ...
 </select>
 <label for="gfg">Floating label</label>
</div>

Example 1: This is a basic example showing a floating label for the select element.

Output:

Example 2: In this example, the floating label is shown for the disabled select element.

Output:

Reference: https://getbootstrap.com/docs/5.2/forms/floating-labels/#selects