How to Create Bootstrap 5 Input Group?

In Bootstrap, input group is used to group text, buttons and button group to the <input> element. It is mainly used with form control elements to provide additional text information and add buttons. In this tutorial, let us explore more on how to use input group in Bootstrap 5.

Bootstrap 5 Input Group Tutorial

This tutorial contains the following topics:

1. Text input group
2. Using variations in text input group
3. Button input group
4. Dropdown input group
5. Segmented dropdown
6. Using checkbox
7. Inserting radio button
8. Larger input group

1. Text Input Group

First let us group simple text elements with <input> tag like below:

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Enter Twitter Username" aria-describedby="twitter">
</div>

In the above code, a text box is created with “.form-control” class. Additional “.input-group-addon” class is used to add text content on left side and the complete code is wrapped inside a <div> with “.input-group” class.

The output will look like below on the browser:

2. Variations in Text Input Group

There are lot of variations possible from the above basic example. We will show three more cases:

• Instead of using @, use $ for amounts
• Place the addon right side of the <input> element
• Show the addons both side of the <input> element

Below is the code for creating three variation in text input group:

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount1">
<span class="input-group-addon">$</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="Enter Amount in Dollars" aria-describedby="amount2">
<span class="input-group-addon">.00</span>
</div>

And the result will look like below:

3. Using Buttons with Input

We have used text addon in all of the above examples. Now let us add a button to <input> element.

<div class="input-group">
<input type="text" class="form-control" placeholder="Keyword">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>

You just need to add “.input-group-btn” class to the <span> tag to create a button. It will produce the following result:

Similar to text addon variations, you can place the button any side of the <input> or both sides.

4. Using Dropdown with Input

The next option is to use dropdown button beside the input element. Refer the dropdown tutorial for creating dropdown buttons.

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<input type="text" class="form-control" placeholder="Dropdown with Text Input" aria-label="Dropdown Input Group">
</div>

The dropdown button with input element will look like below:

5. Using Segmented Dropdown Button

The segmented dropdown button will have a dropdown arrow down the button text. This will give larger text area for the input element. You can create the segmented button input group with the following code:

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">Segment</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<input type="text" class="form-control" placeholder="Segmented Dropdown with Text Input" aria-label="Segmented Dropdown Input Group">
</div>

It will produce the following result:

6. Using Checkbox with Input

Below is the code to create a input element with checkbox in front:

<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="Checkbox Input Group">
</span>
<input type="text" class="form-control" placeholder="Checkbox with Text Input" aria-label="Checkbox Input Group">
</div>

The code will produce the following result:

7. Using Radio Button with Input

The last option is to show radio button in front of the input box.

<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="Radio Button Input Group">
</span>
<input type="text" class="form-control" placeholder="Radio Button with Text Input" aria-label="Radio Button Input Group">
</div>

The radio button with input box should look like below:

8. Larger Input Group

You can make the complete input group elements size larger by adding “.input-group-lg” class to the outer <div>.

<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

---

---