The **`Input Group`** is a composite element consisting of:
* **`IG Left Block`** containing a **`IG Label`** element that can be edited.
* A sample [Input](/app-editor/page-editor/built-in-elements/input.md) 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](/app-editor/page-editor/built-in-elements/input.md), [Multi-line](/app-editor/page-editor/built-in-elements/multi-line.md), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown.md), [Checkbox](/app-editor/page-editor/built-in-elements/checkbox.md), [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch.md), [Button](/app-editor/page-editor/built-in-elements/button.md) elements.
* You can choose to delete the IG Left Block or the IG Right Block
* You can replace the sample [Input](/app-editor/page-editor/built-in-elements/input.md) element with one or more [Multi-line](/app-editor/page-editor/built-in-elements/multi-line.md), [Dropdown](/app-editor/page-editor/built-in-elements/dropdown.md), [Checkbox](/app-editor/page-editor/built-in-elements/checkbox.md), [Toggle Switch](/app-editor/page-editor/built-in-elements/toggle-switch.md), [Button](/app-editor/page-editor/built-in-elements/button.md) elements or add additional [Input](/app-editor/page-editor/built-in-elements/input.md) 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](/app-editor/page-editor/built-in-elements/input.md) element inside it.
* Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Dropdown](/app-editor/page-editor/built-in-elements/dropdown.md) element inside it.
* Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Input](/app-editor/page-editor/built-in-elements/input.md) and [Button](/app-editor/page-editor/built-in-elements/button.md) elements inside it.
* Input group with IG Label element in IG Left Block, a [Button](/app-editor/page-editor/built-in-elements/button.md) inside the IG Right Block element and [Dropdown](/app-editor/page-editor/built-in-elements/dropdown.md) element inside it.
* Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Multi-line](/app-editor/page-editor/built-in-elements/multi-line.md) 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](/app-editor/page-editor/built-in-elements/button-toolbar.md) 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](/app-editor/page-editor/page-element-settings.md#custom-css-classes).
* Use your own CSS class that sets the element's width in the [Custom CSS Classes setting](/app-editor/page-editor/page-element-settings.md#custom-css-classes).
* Use [Design Tab](/app-editor/page-editor/page-element-settings.md#design-tab) and specify a width.
{% hint style="info" %}
To add text to the Input Group, use the IG Label element.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input-group.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.