Bootstrap 5 Input group component
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>
s outside the input group.
With prefix or suffix
New Feature
Using new utility css .input-group-prefix
and .input-group-suffix
to make input group as one input that with a new effect.
Wrapping
Input groups wrap by default via flex-wrap: wrap
in order to accommodate custom form field validation within an input group. You may disable this with .flex-nowrap
.
Sizing
Add the relative form sizing classes to the .input-group
itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
Sizing on the individual input group elements isn’t supported.
Checkboxes and radios
Multiple inputs
While multiple <input>
s are supported visually, validation styles are only available for input groups with a single <input>
.
Multiple addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
Button addons
Buttons with dropdowns
Use buttons with dropdowns to place dropdown on either side of an input.
Segmented buttons
Segmented Buttons allow users to select one item at a time from two to four options. Selecting one option automatically turns off the last selection made.
File input
Input groups include support for custom file inputs. Browser default versions of these are not supported.
Accessibility
Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
The exact technique to be used (<label>
elements hidden using the .visually-hidden
class, or use of the aria-label
and aria-labelledby
attributes, possibly in combination with aria-describedby
) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.