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.
@
Some help content goes here
@example.com
https://example.com/users/
$
.00
Comment
Wrapping inputs
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
Various 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
0.00%
Checkboxes and radios
Place any checkbox or radio option within an input group's addon instead
of text
$
Multiple inputs
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. You can add
.input-group-multi-transition to .input-group
to animate focused inputs
@
0.00
Segmented buttons
Dropdown with action buttons
Seamless icon
Add seamless icons using various utility classes
Button addon
Buttons with dropdown
Dropdowns are easily integrated just like buttons, you can have more
than one dropdowns
Some help content goes here
Some help content goes here
Custom forms
Input groups include support for custom selects and custom file inputs.
Browser default versions of these are not supported
File upload
Combine file upload with addon elements
Upload
Some help content goes here
Upload
Some help content goes here
Kitchen sink
A combination of elements working in harmony
Some help content goes here