Bootstrap 5 Input Groups

Input groups in Bootstrap 5 are an essential component that allows you to extend the functionality of form inputs by adding text, buttons, or other elements. They are commonly used for building interactive and user-friendly forms, such as search bars, pricing inputs, and file uploads.

In this guide, we’ll walk you through how to use Bootstrap 5 Input Groups, customize them, and implement best practices to enhance your forms.

What Are Input Groups in Bootstrap 5?

Input groups combine form controls like text inputs, buttons, or dropdowns into a single element, providing a clean and consistent user interface. These are especially useful when you want to append or prepend elements to an input field, such as currency symbols or icons.

Basic Structure of Input Groups

Bootstrap 5 input groups are created using the input-group class. Within this container, you can add text, buttons, or dropdowns using helper classes like input-group-text, input-group-prepend, and input-group-append.

Basic Input Group Example

To create a simple input group with text, use the following structure:

<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 input and additional elements.
  • input-group-text: Adds text or an icon to the input.
  • form-control: Styles the input field with Bootstrap’s default form design.

Prepending and Appending Text

You can prepend or append text to an input field to show additional context or units, such as currency symbols or measurement units.

Example:

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

Input Group with Buttons

You can include buttons within the input group to perform actions like searches or submissions.

Example:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Send</button>
</div>

Explanation:

  • Buttons can be appended or prepended within the input group.
  • Use btn classes for styling the button.

Input Group with Dropdowns

Bootstrap 5 allows you to combine input fields with dropdown menus for advanced interactivity.

Example:

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Options</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="Type here" aria-label="Text input with dropdown button">
</div>

Explanation:

  • Use Bootstrap’s dropdown classes for creating the dropdown functionality.
  • Place the dropdown button inside the input-group.

File Upload Input Group

To style file upload inputs with Bootstrap 5, include them in an input group.

Example:

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

Explanation:

  • The form-control class styles the file input.
  • Use input-group-text for the upload label.

Multiple Addons

Bootstrap 5 allows you to include multiple elements, like both prepended and appended text or buttons.

Example:

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

Input Group Sizing

Adjust the size of input groups by adding the input-group-sm or input-group-lg classes.

Example:

<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>

<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>

Input Group Validation

You can use Bootstrap 5’s validation classes with input groups to provide feedback to users.

Example:

<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control is-invalid" placeholder="Email" aria-label="Email" required>
  <div class="invalid-feedback">
    Please enter a valid email.
  </div>
</div>

Explanation:

  • Use is-valid or is-invalid classes for validation styling.
  • Add validation messages using valid-feedback or invalid-feedback.

Accessibility Best Practices

  1. Labeling: Always include labels for your input fields to make them accessible. Use the aria-label or aria-labelledby attributes when needed.
  2. Focus Indicators: Ensure input groups are keyboard-navigable and visually indicate focus.
  3. Validation Feedback: Provide clear feedback to users with accessible messages.

FAQs About Bootstrap 5 Input Groups

1. Can I use icons in input groups?

Yes, you can use Bootstrap’s Icon Library or FontAwesome to add icons. Wrap the icon in a <span> with the input-group-text class.

Example:

<div class="input-group mb-3">
  <span class="input-group-text"><i class="bi bi-search"></i></span>
  <input type="text" class="form-control" placeholder="Search">
</div>

2. How do I align input groups in forms?

Use Bootstrap’s grid system or utility classes like mb-3, mt-3, or mx-auto to align and space input groups effectively.

Conclusion

Bootstrap 5 Input Groups are a versatile tool for enhancing your forms with additional functionality and interactivity. Whether you need to append text, include dropdowns, or style file uploads, input groups make the process seamless and visually appealing.

Leave a Comment