Bootstrap 5 Input Group

Last Updated : 26 Apr, 2023

Bootstrap 5 Input Group allows extending the default form controls easily by incorporating text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. Bootstrap 5 facilitates several different components that can be utilized to create the basic Input group in the Form, which is described below.

Bootstrap 5 Input Group Components:

Input group Wrapping: It helps to extend form controls by adding text, or buttons on either side of textual inputs. Input groups are wrapped by default in order to accommodate field validations within an input group
Input group Sizing: It is used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs.
Input group Checkboxes and Radios: It is used to pace the radios and checkboxes within an input group’s addon instead of text.
Input Group Multiple Inputs: It helps to take multiple inputs in an input group. Multiple inputs in an input group do not support validations.
Input group Multiple addons: It helps to add multiple items in an input group which may include text, button, input, checkbox, radio, etc.
Input Group Button Addons: It is used to extend form controls by adding buttons or button groups.
Input group Buttons with dropdowns: It is used to display a button along with an input group. On Clicking this button, it gives a dropdown menu.
Input group Segmented Buttons: It is used to segment dropdowns in input groups, using the same general style as the dropdown button.
Input group Custom forms: It is an extended form control, used to collect specific information from visitors on your website. Custom form limits are placed on the number of unique forms you have created. This form has 2 components:
- Custom Select: This component facilitates to design the form with customizing options, in order to make an attractive user interface.
- Custom file input: This component also facilitates to design the form with customizing options, such as adding the button to upload the file, or making a simple drop-down option to choose the file that is to be uploaded from the given list.
Input group Sass: It has a set of variables with default values that can be changed to customize the Input groups.
- Sass Variables: There are various SASS variables that can be used to include the different CSS properties that help to enhance the overall user experience.

Example 1: This example describes the basic implementation of the Input group in Bootstrap 5.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Bootstrap 5 Input group 
    </title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
         crossorigin="anonymous"> 
  
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Input group </h2> 
  
        <div class="input-group"> 
            <label class="input-group-text"> 
                Years of Experience 
            </label> 
            <select class="form-select"> 
                <option>0</option> 
                <option>1</option> 
                <option>2</option> 
                <option>3</option> 
            </select> 
        </div> 
        <div class="input-group"> 
            <label class="input-group-text">Resume</label> 
            <input type="file" class="form-control"> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This is another example that describes the implementation of the Input group in Bootstrap 5.

SCSS file:

CSS

@import "../node_modules/bootstrap/scss/bootstrap.scss"; 
  
$input-color:white; 
$input-font-weight:800; 
$input-group-addon-bg: rgba(64, 158, 20, 0.747);; 
  
  
.input-group-text { 
    font-weight: $input-font-weight; 
    color: $input-color; 
    background-color: $input-group-addon-bg;     
}

CSS file:

CSS

.input-group-text { 
    font-weight: 800; 
    color: white; 
    background-color: rgba(64, 158, 20, 0.747); 
}

HTML file:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>  
          Bootstrap 5 Input group 
      </title> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body class="m-3"> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>Bootstrap 5 Input group</h2> 
        <br><br> 
        <div class="input-group mb-3"> 
            <label class="input-group-text" 
                   for="file"> 
                   Resume 
            </label> 
            <input type="file" 
                   class="form-control" 
                   id="file"> 
            <label class="input-group-text" 
                   for="file"> 
                   Upload 
            </label> 
        </div> 
    </div> 
</body> 
  
</html>