Input groups are used for extending form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Create a parent container element with .input-group. Place add-on or button on either side of an input wrapping with .input-group-prepend(before the input) and .input-group-append(after the input).
Below example shows the usage of input group.
Add sizing classes to the .input-group. Three sizes are available .input-group(default), .input-group-sm(small) and .input-group-lg(large).
Place any checkbox or radio option within an input group's addon instead of text.
You can add multiple <input>s. Validation styles are only available for input groups with a single <input>.
You can also add multiple add-ons.
Add add-on with segmented dropdown buttons.
Input groups include support for custom selects and custom file inputs.
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 .sr-only 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.
