InputGroup
Open in Storybook Open in Figma
InputGroup serves to for combining inputs and extending them with addons. To see how to add labels and assemble them to forms, see the Form page.
Static Addons
To add an icon or small text to the right of an input field, check out .input-group-text, wrapped by .input-group-append inside an .input-group.
HINT To disable a static addon group, the .input-group needs to be .disabled in addition to the actual input field being disabled.
The AmountInput supports static addons too, usually to display the currency.
Rules For Designers
- Icons in input group addons are 24x24px, colour
$color-blue-400 (#0a285c). - For Search Input: In case the results are displayed and updated while the user types into the input, a static addon with an Icon should be used. Take a look at our examples section.
Button Addons
To add a button to an input field, .input-group-append inside an .input-group is your friend.
HINT Disabling a button addon works the same way as the static variant explained earlier on, but also make sure to remove any button event listener.
Rules For Designers
- Icons in input group buttons are 24x24px, colour
$color-blue-300 (#135ee2). - For Search Input: In case the results are displayed only after the form is submitted, the addon should contain a primary icon Button. Take a look at our examples section.
Dropdown Addons
To add a dropdown to an input field, use a button like above, give it a .dropdown-toggle and add a .dropdown-menu.
HINT To disable a dropdown addon group, set the input field and the dropdown-button to disabled.