Input groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Basic Input Groups

@

@example.com

https://example.com/users/

$
.00

$ 0.00

Input Groups 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.

@
@
@

Checkboxes addons

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

Radio addons

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

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

Buttons with dropdowns

Action Another Action Something else is here

Multiple buttons