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.

{ {< example >} }

@
@example.com
https://example.com/users/
Example help text goes outside the input group.
$ .00
@
With textarea

{ {< /example >} }

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.

{ {< example >} }

@

{ {< /example >} }

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.

{ {< example >} }

Small
Default
Large

{ {< /example >} }

Checkboxes and radios#

Place any checkbox or radio option within an input group's addon instead of text. We recommend adding .mt-0 to the .form-check-input when there's no visible text next to the input.

{ {< example >} }

{ {< /example >} }

Multiple inputs#

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

{ {< example >} }

First and last name

{ {< /example >} }

Multiple addons#

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

{ {< example >} }

$ 0.00
$ 0.00

{ {< /example >} }

Button addons#

{ {< example >} }

{ {< /example >} }

Buttons with dropdowns#

{ {< example >} }

{ {< /example >} }

Segmented buttons#

{ {< example >} }

{ {< /example >} }

Custom forms#

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

Custom select#

{ {< example >} }

{ {< /example >} }

Custom file input#

{ {< example >} }

{ {< /example >} }

CSS#

Sass variables#

{ { < scss-docs name="input-group-variables" file="scss/_variables.scss" }}