Bootstrap 5.3 Form Input Group: Creating Customized Input Group Components

In Bootstrap 5.3, a form input group is a component that allows you to group an input field with additional content or elements, such as icons, buttons, or text, to create a more customized and visually appealing form input.

The form input group in Bootstrap 5.3 consists of an outer <div> container with the class "input-group" and one or more child elements, such as input fields, buttons, or text.

Input with Addon

In Bootstrap 5.3, you can use the "input-group" component to create an input field with an addon. The addon can be a text, icon, or button that is attached to the input field, providing additional context or functionality. Here's an example

<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username" />
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="your username" />
    <span class="input-group-text">@gmail.com</span>
</div>

<div class="input-group mb-3">
    <span class="input-group-text">₹</span>
    <input type="text" class="form-control" placeholder="Price" />
    <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="username" />
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="server" />
</div>

<div class="input-group mb-3">
    <span class="input-group-text">Remarks</span>
    <textarea class="form-control"></textarea>
</div>

Code Snippet 1:

This code snippet creates an input group with a prefix addon. The @ symbol is added as the prefix addon. The input field has the form-control class and a placeholder text "Username". The mb-3 class is used to add margin-bottom for spacing purposes.

Code Snippet 2:

This code snippet creates an input group with a suffix addon. The input field has the form-control class and a placeholder text "your username". The @gmail.com is added as the suffix addon.

Code Snippet 3:

This code snippet creates an input group with both prefix and suffix addons. The ₹ symbol is added as the prefix addon, and .00 is added as the suffix addon. The input field has the form-control class and a placeholder text "Price".

Code Snippet 4:

This code snippet creates an input group with two input fields. The first input field has a placeholder text "username". The @ symbol is added as an addon in between the two input fields. The second input field has a placeholder text "server".

Code Snippet 5:

This code snippet creates an input group with a textarea field. The "Remarks" text is added as a prefix addon using the input-group-text class. The textarea field has the form-control class.

The input-group class is used to create the input group container, and the mb-3 class adds margin-bottom for spacing purposes.

These examples demonstrate various ways you can use input groups in Bootstrap 5.3 to add prefixes, suffixes, and combine input fields with different addons. Input groups are useful for enhancing the functionality and visual appeal of forms in your web projects.

Input Group Sizing

In Bootstrap 5.3, you can adjust the size of the input groups using predefined classes to make them smaller or larger. Input Group Sizing classes allow you to control the width of the input fields and addons within the input groups. Here's how you can use input group sizing in Bootstrap 5.3

Small Input Group:

To create a small-sized input group, you can use the class "input-group-sm" on the parent <div> container. This class reduces the width of the input fields and addons within the input group.

<div class="input-group mb-3 input-group-sm">
    <span class="input-group-text">small</span>
    <input type="text" class="form-control" />
</div>

Default Input Group:

The default size of the input group does not require any additional class. It is the standard size used by Bootstrap.

<div class="input-group mb-3">
    <span class="input-group-text">Medium</span>
    <input type="text" class="form-control" />
</div>

Large Input Group:

To create a larger-sized input group, you can use the class "input-group-lg" on the parent <div> container. This class increases the width of the input fields and addons within the input group.

<div class="input-group mb-3 input-group-lg">
    <span class="input-group-text">Large</span>
    <input type="text" class="form-control" />
</div>

Input Group Checkboxs & Radios

In Bootstrap 5.3, you can create input groups with checkboxes and radios using the input group component. Input group checkboxes and radios allow you to group checkboxes or radio buttons together with labels and additional content. Here's how you can create input group checkboxes and radios in Bootstrap 5.3

<div class="input-group mb-3">
    <div class="input-group-text">
      <input type="checkbox" class="form-check-input mt-0" />
    </div>
    <input type="text" class="form-control" />
</div>

<div class="input-group mb-3">
    <div class="input-group-text">
      <input type="radio" class="form-check-input mt-0" />
    </div>
    <input type="text" class="form-control" />
</div>

Input Group with Multiple Inputs

In Bootstrap 5.3, you can create an input group with multiple inputs by combining multiple input fields within the input group container. This allows you to group and align multiple inputs together for a cohesive form layout. Here's an example of an input group with multiple inputs in Bootstrap 5.3

<div class="input-group mb-3">
    <div class="input-group-text">
      <input type="checkbox" class="form-check-input mt-0" />
    </div>
    <input type="text" class="form-control" />
</div>

<div class="input-group mb-3">
    <div class="input-group-text">
      <input type="radio" class="form-check-input mt-0" />
    </div>
    <input type="text" class="form-control" />
</div>

Multiple Addons

In Bootstrap 5.3, you can create an input group with multiple addons. Addons can be text, icons, or buttons that provide additional context or functionality to the input field. By combining multiple addons within the input group, you can enhance the design and functionality of your forms. Here's an example of an input group with multiple addons in Bootstrap 5.3

<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
    <input type="text" class="form-control" />
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" />
    <span class="input-group-text">0.00</span>
    <span class="input-group-text">$</span>
</div>

Button Addons

In Bootstrap 5.3, you can add button addons to input fields within an input group. Button addons are buttons that are attached to the input field, providing additional functionality or actions. Here's an example of using button addons in Bootstrap 5.3

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary">Button</button>
    <input type="text" class="form-control" />
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" />
    <button class="btn btn-outline-secondary">Button</button>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-secondary">Button</button>
    <button class="btn btn-outline-secondary">Button</button>
    <input type="text" class="form-control" />
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" />
    <button class="btn btn-outline-secondary">Button</button>
    <button class="btn btn-outline-secondary">Button</button>
</div>

Dropdowns Addons

In Bootstrap 5.3, you can add dropdowns as addons to input fields within an input group. Dropdown addons provide a list of options or actions that users can select from. Here's an example of using dropdown addons in Bootstrap 5.3

<div class="input-group mb-3">
    <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link-1</a></li>
      <li><a class="dropdown-item" href="#">Link-2</a></li>
      <li><a class="dropdown-item" href="#">Link-3</a></li>
      <li><a class="dropdown-item" href="#">Link-4</a></li>
    </ul>
    <input type="text" class="form-control" />
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" />
    <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link-1</a></li>
      <li><a class="dropdown-item" href="#">Link-2</a></li>
      <li><a class="dropdown-item" href="#">Link-3</a></li>
      <li><a class="dropdown-item" href="#">Link-4</a></li>
    </ul>
</div>

<div class="input-group mb-3">
    <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link-1</a></li>
      <li><a class="dropdown-item" href="#">Link-2</a></li>
      <li><a class="dropdown-item" href="#">Link-3</a></li>
      <li><a class="dropdown-item" href="#">Link-4</a></li>
    </ul>
    <input type="text" class="form-control" />
    <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link-1</a></li>
      <li><a class="dropdown-item" href="#">Link-2</a></li>
      <li><a class="dropdown-item" href="#">Link-3</a></li>
      <li><a class="dropdown-item" href="#">Link-4</a></li>
    </ul>
</div>

Segmented Buttons

In Bootstrap 5.3, you can create segmented buttons, also known as button groups, where each button behaves like a separate toggle button. Segmented buttons are useful when you want users to choose a single option from a group of mutually exclusive options. Here's an example of segmented buttons in Bootstrap 5.3

<div class="mb-3 input-group">
    <button class="btn btn-success">Button</button>
    <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link-1</a></li>
      <li><a class="dropdown-item" href="#">Link-2</a></li>
      <li><a class="dropdown-item" href="#">Link-3</a></li>
      <li><a class="dropdown-item" href="#">Link-4</a></li>
    </ul>
    <input type="text" class="form-control" />
</div>

<div class="mb-3 input-group">
    <input type="text" class="form-control" />
    <button class="btn btn-success">Button</button>
    <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link-1</a></li>
      <li><a class="dropdown-item" href="#">Link-2</a></li>
      <li><a class="dropdown-item" href="#">Link-3</a></li>
      <li><a class="dropdown-item" href="#">Link-4</a></li>
    </ul>
</div>

Select with addons

In Bootstrap 5.3, you can add addons to <select> elements within an input group. Addons can be used to provide additional information or functionality related to the select input. Here's an example of using addons with <select> in Bootstrap 5.3

<div class="mb-3 input-group">
    <label class="input-group-text">Options</label>
    <select class="form-select">
      <option value="">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
</div>
<div class="mb-3 input-group">
    <select class="form-select">
      <option value="">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <label class="input-group-text">Options</label>
</div>

<div class="mb-3 input-group">
    <button class="btn btn-primary">Button</button>
    <select class="form-select">
      <option value="">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
</div>
<div class="mb-3 input-group">
    <select class="form-select">
      <option value="">Select</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <button class="btn btn-primary">Button</button>
</div>

Input File with addon

In Bootstrap 5.3, you can add an addon to the input file field within an input group. This allows you to enhance the appearance and functionality of the file input. Here's an example of using an addon with the input file field in Bootstrap 5.3

<div class="mb-3 input-group">
    <label class="input-group-text">Upload</label>
    <input type="file" class="form-control" />
</div>
<div class="mb-3 input-group">
    <input type="file" class="form-control" />
    <label class="input-group-text">Upload</label>
</div>

<div class="mb-3 input-group">
    <button class="btn btn-primary">Button</button>
    <input type="file" class="form-control" />
</div>
<div class="mb-3 input-group">
    <input type="file" class="form-control" />
    <button class="btn btn-primary">Button</button>
</div>

Example

<!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" />
    <title>Input Group in Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/base.css" />
  </head>
  <body>
    <div class="container my-5">
      <h4 class="text-danger mb-3">Input Group in Bootstrap</h4>

      <div class="row">
        <div class="col-8">
          <p class="fw-semibold text-primary border-bottom border-primary py-3">Input with Addon</p>
          <div class="input-group mb-3">
            <span class="input-group-text">@</span>
            <input type="text" class="form-control" placeholder="Username" />
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="your username" />
            <span class="input-group-text">@gmail.com</span>
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text">₹</span>
            <input type="text" class="form-control" placeholder="Price" />
            <span class="input-group-text">.00</span>
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="username" />
            <span class="input-group-text">@</span>
            <input type="text" class="form-control" placeholder="server" />
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text">Remarks</span>
            <textarea class="form-control"></textarea>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Input Group Sizing</p>

          <div class="input-group mb-3 input-group-sm">
            <span class="input-group-text">small</span>
            <input type="text" class="form-control" />
          </div>
          <div class="input-group mb-3">
            <span class="input-group-text">Medium</span>
            <input type="text" class="form-control" />
          </div>
          <div class="input-group mb-3 input-group-lg">
            <span class="input-group-text">Large</span>
            <input type="text" class="form-control" />
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Input Group Checkboxs & Radios</p>

          <div class="input-group mb-3">
            <div class="input-group-text">
              <input type="checkbox" class="form-check-input mt-0" />
            </div>
            <input type="text" class="form-control" />
          </div>

          <div class="input-group mb-3">
            <div class="input-group-text">
              <input type="radio" class="form-check-input mt-0" />
            </div>
            <input type="text" class="form-control" />
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Input Group with Multiple Inputs</p>

          <div class="input-group">
            <span class="input-group-text">Full Name</span>
            <input type="text" class="form-control" placeholder="First Name" />
            <input type="text" class="form-control" placeholder="Last Name" />
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Multiple Addons</p>

          <div class="input-group mb-3">
            <span class="input-group-text">$</span>
            <span class="input-group-text">0.00</span>
            <input type="text" class="form-control" />
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" />
            <span class="input-group-text">0.00</span>
            <span class="input-group-text">$</span>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Button Addons</p>

          <div class="input-group mb-3">
            <button class="btn btn-outline-secondary">Button</button>
            <input type="text" class="form-control" />
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" />
            <button class="btn btn-outline-secondary">Button</button>
          </div>

          <div class="input-group mb-3">
            <button class="btn btn-outline-secondary">Button</button>
            <button class="btn btn-outline-secondary">Button</button>
            <input type="text" class="form-control" />
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" />
            <button class="btn btn-outline-secondary">Button</button>
            <button class="btn btn-outline-secondary">Button</button>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Dropdowns Addons</p>

          <div class="input-group mb-3">
            <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Link-1</a></li>
              <li><a class="dropdown-item" href="#">Link-2</a></li>
              <li><a class="dropdown-item" href="#">Link-3</a></li>
              <li><a class="dropdown-item" href="#">Link-4</a></li>
            </ul>
            <input type="text" class="form-control" />
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" />
            <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Link-1</a></li>
              <li><a class="dropdown-item" href="#">Link-2</a></li>
              <li><a class="dropdown-item" href="#">Link-3</a></li>
              <li><a class="dropdown-item" href="#">Link-4</a></li>
            </ul>
          </div>

          <div class="input-group mb-3">
            <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Link-1</a></li>
              <li><a class="dropdown-item" href="#">Link-2</a></li>
              <li><a class="dropdown-item" href="#">Link-3</a></li>
              <li><a class="dropdown-item" href="#">Link-4</a></li>
            </ul>
            <input type="text" class="form-control" />
            <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Link-1</a></li>
              <li><a class="dropdown-item" href="#">Link-2</a></li>
              <li><a class="dropdown-item" href="#">Link-3</a></li>
              <li><a class="dropdown-item" href="#">Link-4</a></li>
            </ul>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Segmented Button</p>
          <div class="mb-3 input-group">
            <button class="btn btn-success">Button</button>
            <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Link-1</a></li>
              <li><a class="dropdown-item" href="#">Link-2</a></li>
              <li><a class="dropdown-item" href="#">Link-3</a></li>
              <li><a class="dropdown-item" href="#">Link-4</a></li>
            </ul>
            <input type="text" class="form-control" />
          </div>

          <div class="mb-3 input-group">
            <input type="text" class="form-control" />
            <button class="btn btn-success">Button</button>
            <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Link-1</a></li>
              <li><a class="dropdown-item" href="#">Link-2</a></li>
              <li><a class="dropdown-item" href="#">Link-3</a></li>
              <li><a class="dropdown-item" href="#">Link-4</a></li>
            </ul>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Select with addon</p>

          <div class="mb-3 input-group">
            <label class="input-group-text">Options</label>
            <select class="form-select">
              <option value="">Select</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
          <div class="mb-3 input-group">
            <select class="form-select">
              <option value="">Select</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
            <label class="input-group-text">Options</label>
          </div>

          <div class="mb-3 input-group">
            <button class="btn btn-primary">Button</button>
            <select class="form-select">
              <option value="">Select</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
          <div class="mb-3 input-group">
            <select class="form-select">
              <option value="">Select</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
            <button class="btn btn-primary">Button</button>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Input File with addon</p>

          <div class="mb-3 input-group">
            <label class="input-group-text">Upload</label>
            <input type="file" class="form-control" />
          </div>
          <div class="mb-3 input-group">
            <input type="file" class="form-control" />
            <label class="input-group-text">Upload</label>
          </div>

          <div class="mb-3 input-group">
            <button class="btn btn-primary">Button</button>
            <input type="file" class="form-control" />
          </div>
          <div class="mb-3 input-group">
            <input type="file" class="form-control" />
            <button class="btn btn-primary">Button</button>
          </div>

          <!--Col end-->
        </div>
      </div>
      <!--Container end -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview