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:

• You can replace the IG Label blocks with one or more Input, Multi-line, Dropdown, Checkbox, Toggle Switch, Button elements.
• You can choose to delete the IG Left Block or the IG Right Block

• You can replace the sample Input element with one or more Multi-line, Dropdown, Checkbox, Toggle Switch, Button elements or add additional Input elements.

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:

• Specify the built-in CSS class w-auto in the Custom CSS Classes setting.
• Use your own CSS class that sets the element's width in the Custom CSS Classes setting.
• Use Design Tab and specify a width.

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