Go to Content
Design System
Playroom Storybook
#ClimateEmergency

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.

Loading demo…

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.

Loading demo…
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.

Loading demo…

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.

Loading demo…

HINT To disable a dropdown addon group, set the input field and the dropdown-button to disabled.

Plus/Minus Input

Input addons can be used to construct more complex configurations:

Loading demo…