Input Group

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.

How to use

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

Checkboxes and radios

Place any checkbox or radio option within an input group's addon instead of text.

Multiple inputs

You can add multiple <input>s. Validation styles are only available for input groups with a single <input>.

Multiple addons

You can also add multiple add-ons.

Button addons
Add button add-on as below.
Segmented buttons

Add add-on with segmented dropdown buttons.

Custom forms

Input groups include support for custom selects and custom file inputs.

Custom file input

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.

Related Tutorial
Follow Us #
Contents +