Bootstrap - Input Groups

Input groups in Bootstrap 5 are used to enhance form controls by combining inputs with additional elements such as text, buttons, or icons. This feature provides a clean and interactive user interface for forms.

Basic Structure

Input groups are created using the input-group class. Add the desired controls inside the input group, like text inputs, buttons, or dropdowns.

Example: Basic Input Group

<div class="input-group">

  <span class="input-group-text" id="basic-addon1">@</span>

  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">

</div>

Explanation:

input-group: Wrapper class for the input group.

input-group-text: Used for text or icon within the input group.

form-control: Applies standard styling to the input field.

Sizing Input Groups

Bootstrap 5 input groups support different sizes: sm (small) and lg (large).

Example: Sizing

<div class="input-group input-group-sm">

  <span class="input-group-text">@</span>

  <input type="text" class="form-control" placeholder="Small input">

</div>

<div class="input-group">

  <span class="input-group-text">@</span>

  <input type="text" class="form-control" placeholder="Default input">

</div>

<div class="input-group input-group-lg">

  <span class="input-group-text">@</span>

  <input type="text" class="form-control" placeholder="Large input">

</div>

Adding Buttons to Input Groups

You can include buttons inside an input group.

Example: Input with a Button

<div class="input-group">

  <input type="text" class="form-control" placeholder="Search" aria-label="Search">

  <button class="btn btn-primary" type="button">Go</button>

</div>

Multiple Inputs

You can combine multiple inputs within a single input group.

Example: Multiple Inputs

<div class="input-group">

  <input type="text" class="form-control" placeholder="First name">

  <input type="text" class="form-control" placeholder="Last name">

</div>

Input Group with Dropdowns

Dropdown menus can be added to input groups.

Example: Input with Dropdown

<div class="input-group">

  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>

  <ul class="dropdown-menu">

    <li><a class="dropdown-item" href="#">Action</a></li>

    <li><a class="dropdown-item" href="#">Another action</a></li>

    <li><a class="dropdown-item" href="#">Something else</a></li>

  </ul>

  <input type="text" class="form-control" placeholder="Dropdown input">

</div>

Input Group with Checkbox or Radio

Include checkboxes or radio buttons in input groups.

Example: Checkbox and Radio Inputs

<div class="input-group">

  <div class="input-group-text">

    <input class="form-check-input mt-0" type="checkbox" aria-label="Checkbox">

  </div>

  <input type="text" class="form-control" placeholder="Checkbox input">

</div>

<div class="input-group">

  <div class="input-group-text">

    <input class="form-check-input mt-0" type="radio" aria-label="Radio button">

  </div>

  <input type="text" class="form-control" placeholder="Radio input">

</div>

Append and Prepend Text

You can add text before or after the input field.

Example: Text Additions

<div class="input-group">

  <span class="input-group-text">$</span>

  <input type="text" class="form-control" placeholder="Amount" aria-label="Amount">

  <span class="input-group-text">.00</span>

</div>

Custom File Inputs

Use custom file inputs within input groups.

Example: File Input

<div class="input-group">

  <input type="file" class="form-control" id="inputGroupFile">

  <label class="input-group-text" for="inputGroupFile">Upload</label>

</div>

Notes and Best Practices

Always use proper ARIA attributes like aria-label or aria-describedby for accessibility.

Input groups do not support validation styles like is-valid or is-invalid.

Use appropriate spacing and alignment to maintain consistency in your design.

Conclusion

Bootstrap 5 Input Groups provide a flexible and user-friendly way to enhance forms. Whether adding text, buttons, dropdowns, or icons, input groups allow developers to create interactive and visually appealing form controls easily.