Absolutely! Here's a clear overview of Bootstrap 5 Input Groups — perfect for enhancing form inputs with buttons, text, icons, or dropdowns.

? Bootstrap 5 Input Groups

Input groups allow you to combine inputs and add-ons like text, buttons, or dropdowns into a single, connected UI element.

1. Basic Input Group

Wrap your input and add-ons inside .input-group:

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

• .input-group-text adds a text addon.

• .form-control is the input field.

2. Input Group with Button

Add buttons inside the group:

<div class="input-group mb-3">  <input type="text" class="form-control" placeholder="Search" aria-label="Search" />  <button class="btn btn-outline-secondary" type="button">Go</button></div>

3. Multiple Addons

You can have multiple text or button addons:

<div class="input-group mb-3">  <span class="input-group-text">$</span>  <input type="text" class="form-control" aria-label="Amount" />  <span class="input-group-text">.00</span></div>

4. Input Group with Dropdown

Use a dropdown inside input group:

<div class="input-group mb-3">  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">    Action  </button>  <ul class="dropdown-menu dropdown-menu-end">    <li><a class="dropdown-item" href="#">Option 1</a></li>    <li><a class="dropdown-item" href="#">Option 2</a></li>  </ul>  <input type="text" class="form-control" aria-label="Text input with dropdown" /></div>

5. Input Group Sizing

Adjust size using .input-group-sm or .input-group-lg:

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

6. Floating Labels with Input Groups

You can combine input groups with floating labels:

<div class="form-floating mb-3">  <div class="input-group">    <span class="input-group-text">@</span>    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" />    <label for="floatingInput">Email address</label>  </div></div>

Summary Table of Key Classes

If you want, I can help you build a fully functional search bar, form input with validation, or show input groups combined with other Bootstrap 5 components!