BS5 Input Groups

Extend form controls with text, buttons, and more

📝 What are Input Groups?

Input groups allow you to extend form controls by adding text, buttons, or button groups on either side of textual inputs. They help create more interactive and user-friendly forms with visual context. 


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

Basic Input Groups

Basic input groups combine input fields with supplemental text or icons placed before or after, using `.input-group-text` for consistent styling. This provides immediate visual context about expected data, such as adding "@" for emails or "$" for prices. By grouping related elements, forms become more intuitive and user-friendly, reducing input errors and improving completion rates. Basic input groups are essential for creating professional, functional forms in e-commerce, dashboards, and data-heavy applications where clear data prompts enhance usability.

🔸 Text Addon 

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

<!-- Append text -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Website">
    <span class="input-group-text">.com</span>
</div>

<!-- Both sides -->
<div class="input-group">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control">
    <span class="input-group-text">.00</span>
</div>

Output:

$
.com
$ .00

🔹 Input Groups with Buttons

Input groups with buttons integrate actionable elements like search icons, submit buttons, or clear triggers directly beside input fields for immediate interaction. This pattern streamlines user workflows by combining input and action in a single visual unit, reducing clicks and improving efficiency. Typical applications include search bars with magnifying glass buttons, password fields with show/hide toggles, or form fields with validation triggers. It enhances both functionality and design cohesion, creating more dynamic, responsive form experiences. 

<!-- Button on right -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search...">
    <button class="btn btn-primary" type="button">Search</button>
</div>

<!-- Button on left -->
<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Go</button>
    <input type="text" class="form-control" placeholder="Enter URL">
</div>

Output:

🔹 Input Group Sizing

Input group sizing with `.input-group-sm` or `.input-group-lg` uniformly adjusts all contained elements—inputs, text, and buttons—to maintain proportional appearance. Consistent sizing ensures visual harmony and improves usability by aligning with overall design scales. Smaller groups fit compact spaces like toolbars, while larger ones enhance touch targets on mobile interfaces. This scalability supports responsive design principles, allowing input groups to adapt seamlessly across different layout contexts and device types while preserving functional and aesthetic integrity. 

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

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

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

Output:

Small
Default
Large

🔹 Checkboxes and Radios

Incorporating checkboxes or radio buttons within input groups allows combined selection and text input in a unified component, optimizing form layout and functionality. This is useful for agreements, preferences, or options that accompany data entry, such as "Subscribe to newsletter" checkboxes beside email fields. By grouping these elements, forms become more compact and logically organized, improving user flow and reducing visual separation between related actions. This pattern supports complex forms requiring both input and selection in a cohesive structure. 

<!-- Checkbox -->
<div class="input-group mb-3">
    <div class="input-group-text">
        <input class="form-check-input" type="checkbox">
    </div>
    <input type="text" class="form-control" placeholder="I agree">
</div>

<!-- Radio -->
<div class="input-group">
    <div class="input-group-text">
        <input class="form-check-input" type="radio">
    </div>
    <input type="text" class="form-control" placeholder="Select option">
</div>

Output:

🔹 Multiple Inputs

Multiple inputs within a single input group collect related data points like first/last names or date components in a visually connected unit, enhancing form organization. This approach improves data entry efficiency by logically grouping associated fields, reducing cognitive load and input errors. It is ideal for addresses, time periods, or any segmented information that belongs together. Proper styling ensures clear separators and alignment, creating professional, user-friendly forms that guide users through structured data entry processes smoothly. 

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

Output:

Name

🧠 Test Your Knowledge

Which class creates an input group in Bootstrap 5?