Bootstrap - Bootstrap 5 Input Group

Bootstrap 5 Input Groups allow you to combine inputs, buttons, text, icons, or dropdowns into a single form control.
They are extremely useful for building search bars, currency fields, email inputs, quantity selectors, and complex form layouts.

1. Basic Bootstrap 5 Input Group

Use the .input-group container along with .input-group-text to prepend or append text to an input.

Example: Basic Input Group

<div class="input-group mb-3">
  <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 → Wraps the entire group.
.input-group-text → Adds static text or symbols.
.form-control → Styles the input field.
aria-describedby → Improves accessibility.

2. Input Group with Text on Both Sides

You can add text on both sides of the input.

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

3. Input Group Sizing

Bootstrap 5 supports three sizes of input groups:

Large Input Group

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

Default Input Group

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

Small Input Group

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

4. Input Group with Buttons

You can place buttons before or after an input field.

Button on Right Side

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

Button on Left Side

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Copy</button>
  <input type="text" class="form-control" placeholder="Paste content here">
</div>

5. Input Group with Dropdowns

You can use Bootstrap dropdowns inside input groups.

Dropdown on Left

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Action</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Choose option">
</div>

6. Input Group with Checkboxes and Radios

You can integrate checkboxes or radio buttons inside input groups.

Checkbox Example

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

Radio Example

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

7. Input Group with Multiple Inputs

Bootstrap 5 allows multiple input fields inside a single .input-group.

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

8. Input Group with Icons

You can use Bootstrap Icons or Font Awesome inside .input-group-text.

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

<div class="input-group mb-3">
  <span class="input-group-text"><i class="bi bi-envelope"></i></span>
  <input type="email" class="form-control" placeholder="Email address">
</div>

9. Input Group with Floating Labels

Combine floating labels with input groups for a modern look.

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="email" class="form-control" id="floatingEmail" placeholder="Email">
    <label for="floatingEmail">Email</label>
  </div>
</div>

10. Input Group with Validation

Bootstrap 5 supports form validation with input groups.

<form class="needs-validation" novalidate>
  <div class="input-group has-validation mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" id="username" placeholder="Username" required>
    <div class="invalid-feedback">
      Please enter a valid username.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

11. Full Example: Bootstrap 5 Input Groups

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Input Groups</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="p-4">

  <h3>Bootstrap 5 Input Groups</h3>

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

  <!-- Input with text on both sides -->
  <div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" placeholder="Amount">
    <span class="input-group-text">.00</span>
  </div>

  <!-- Input with button -->
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-primary" type="button">Go</button>
  </div>

  <!-- Input with dropdown -->
  <div class="input-group mb-3">
    <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Action</button>
    <ul class="dropdown-menu">
      <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" placeholder="Select option">
  </div>

  <!-- Input with icon -->
  <div class="input-group mb-3">
    <span class="input-group-text"><i class="bi bi-envelope"></i></span>
    <input type="email" class="form-control" placeholder="Email">
  </div>

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

  <!-- Multiple inputs -->
  <div class="input-group mb-3">
    <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>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>