Bootstrap 5 Floating labels Selects

Last Updated : 26 Dec, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport"   
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> 
</head> 
  
<body class="text-center m-4"> 
    <div class="container"> 
        <div> 
            <h3 class="text-success"> 
                GeeksforGeeks 
            </h3> 
            <h4> 
              Bootstrap 5 Floating labels Selects 
            </h4> 
        </div> 
  
        <div class="form-floating"> 
            <select id="gfg" class="form-select"> 
                <option value="google">Google</option> 
                <option value="apple">Apple</option> 
                <option value="microsoft">Microsoft</option> 
                <option value="meta">Meta</option> 
                <option value="netflix">Netflix</option> 
            </select> 
            <label for="gfg">Select a Company</label> 
        </div> 
    </div> 
</body> 
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> 
</head> 
  
<body class="text-center m-4"> 
    <div class="container"> 
        <div> 
            <h3 class="text-success"> 
                GeeksforGeeks 
            </h3> 
            <h4>Bootstrap 5 Floating labels Selects 
            </h4> 
        </div> 
  
        <h5 class="m-3">Floating label with Disabled  
            Select Element 
        </h5> 
        <div class="form-floating"> 
            <select id="gfg" class="form-select" disabled> 
                <option value="null" selected>Select a Car</option> 
                <option value="google">Dezire</option> 
                <option value="apple">Ertiga</option> 
                <option value="microsoft">Scorpio</option> 
                <option value="meta">Brezza</option> 
            </select> 
            <label for="gfg">Floating label for  
                disabled select 
            </label> 
        </div> 
    </div> 
</body> 
</html>