Input Group

Input Group Element

The Input Group is a composite element consisting of:

  • IG Left Block containing a IG Label element that can be edited.

  • A sample Input element.

  • IG Right Block containing a IG Label element that can be edited.

The input group element is fully customizable. Here are some examples:

The image below shows example of various ways you could use the Input Group element (from top to bottom, left to right):

  • Input group with IG Label elements in IG Left Block and IG Right Block elements, and a standard Input element inside it.

  • Input group with IG Label elements in IG Left Block and IG Right Block elements, with a Dropdown element inside it.

  • Input group with IG Label elements in IG Left Block and IG Right Block elements, with a Input and Button elements inside it.

  • Input group with IG Label element in IG Left Block, a Button inside the IG Right Block element and Dropdown element inside it.

  • Input group with IG Label elements in IG Left Block and IG Right Block elements, with a Multi-line element inside it.

Example of the various ways you can customize the Input Group

The input group elements can be added to the Button Toolbar element along with button group elements to create a cohesive multi-functional toolbar for your app.

The Input Group element normally occupies the full width of the parent element it is placed in. You can customize this behavior by:

To add text to the Input Group, use the IG Label element.

Last updated