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