Input Groups
Components / Molecules
Base
The base input group will show at all breakpoints.
Breakpoints
Note: These input groups will appear on one row only at their breakpoint size and above. Below their breakpoint, the button fill flow under the input.
Sizes
Icons
You can add an icon next to an input (instead of a button) by using the input-group--icon CSS class on the icon.
Icons Base
Icons Sizes
Combining Icon & Buttons
Combo Base
Combo Sizes
Selectize & Input Groups
Base
Sizes
Datepicker & Input Groups
Base
Sizes
Input groups save space by putting input and button on the same row. They will automatically fill up the width of its parent container, so they are meant to be used with rows and columns from the Grid.
Input group classes include:
.input-group.input-group--input.input-group--action.input-group--icon
Additionally, you'll want to use the margin--off CSS class (or margin--off--xxs through margin--off--xxl) to remove the global margin-top styling.
Don't forget to add a label and hide it visually with sr-only for accessibility, and also add placeholder text to help the user input the correct data.