# Input Group

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FD1xcDLfSjtOc1GFT5i4r%2Fimage.png?alt=media&#x26;token=17771659-afe6-47c8-88ed-9b21b96b8dd7" alt="" width="71"><figcaption><p>Input Group Element</p></figcaption></figure></div>

The **`Input Group`** is a composite element consisting of:

* **`IG Left Block`** containing a **`IG Label`** element that can be edited.
* A sample [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/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](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input), [Multi-line](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/multi-line), [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown), [Checkbox](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/checkbox), [Toggle Switch](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/toggle-switch), [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) elements.
* You can choose to delete the IG Left Block or the IG Right Block
* You can replace the sample [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element with one or more [Multi-line](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/multi-line), [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown), [Checkbox](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/checkbox), [Toggle Switch](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/toggle-switch), [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) elements or add additional [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/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](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) element inside it.
* Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown) element inside it.
* Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Input](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/input) and [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) elements inside it.
* Input group with IG Label element in IG Left Block, a [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) inside the IG Right Block element and [Dropdown](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/dropdown) element inside it.
* Input group with IG Label elements in IG Left Block and IG Right Block elements, with a [Multi-line](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/multi-line) element inside it.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FPFmPOiF4NV3KiCSBBTHE%2Fimage.png?alt=media&#x26;token=ae36f2ec-038f-4f93-b496-7214a5dfe96d" alt=""><figcaption><p>Example of the various ways you can customize the Input Group</p></figcaption></figure>

The input group elements can be added to the [Button Toolbar](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/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](https://docs.zingy.ai/app-editor/page-element-settings#custom-css-classes).
* Use your own CSS class that sets the element's width in the [Custom CSS Classes setting](https://docs.zingy.ai/app-editor/page-element-settings#custom-css-classes).
* Use [Design Tab](https://docs.zingy.ai/app-editor/page-element-settings#design-tab) and specify a width.

{% hint style="info" %}
To add text to the Input Group, use the IG Label element.
{% endhint %}