# Input Group ## Overview An Input Group is a component that consists of input fields with text or button add-ons grouped into one element. It allows for a more structured and visually appealing way to display input fields along with additional elements like buttons or text add-ons. ## Get Started

### Add an Input Group to a form In the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor), drag the Input Group component from the Pallet onto the form, then select a dataprovider.

{% hint style="info" %} If the component does not appear in the pallet, it means you do not have the Bootstrap Extra Components package installed. Click "Get more components" at the top of the pallet to open the [Servoy Package Manager](https://docs.servoy.com/reference/servoy-developer/package-manager) and install it. {% endhint %} ## Modifying an Input Group at Design-Time Input Groups, like all components, have properties that can be modified at design time to set the appearance and behavior of the component. Select the component in the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) to see a list of properties in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties). Below are some common properties and how to set them at design time. {% hint style="info" %} See the reference docs for [Input Group](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group) for a complete list of its [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#properties). {% endhint %} ### Setting the data-provider Input Group's dataprovider can be set after the component has been added to the form or by setting it in [dataprovider](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#dataprovider) property, found in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties). ### AddOn

AddOns are text add-ons that can be added either to the left or right of a text field within an inputgroup.\ AddOn properties can be found [here](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addon). Here are the steps to add an addOn to an Input Group: 1. Select the component in the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) 2. Select the [`addOns`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addons) property and click the `+` button in order to add one 3. Expand the [`addOns`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addons) property to see the list of addOns. 4. In order to edit each addOn, expand it set its [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addon) ### AddOnButton

AddOnButtons are buttons that can be added either to the left or right of a text field within an inputgroup. AddOnButton properties can be found [here](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addonbutton). Here are the steps to add an addOnButton to an Input Group: 1. Select the component in the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) 2. Select the [`addOnButtons`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addonbuttons) property and click the `+` button in order to add one 3. Expand the [`addOnButtons`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addonbuttons) property to see the list of addOnButtons. 4. In order to edit each addOnButton, expand it set its [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addonbutton) ### Using a format Input Group's Format can be set in [Format](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#format) property. Depending on the type of each dataprovider, this will be done via the format editors for [date](https://docs.servoy.com/reference/servoy-developer/object-editors/date-format-editor), [text](https://docs.servoy.com/reference/servoy-developer/object-editors/text-format-editor), [integer/number](https://docs.servoy.com/reference/servoy-developer/object-editors/number-format-editor). ### Setting the input type Input Group's input type can be set in [inputType](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#inputtype) property, found in the [Component Properties Editor](https://docs.servoy.com/reference/servoy-developer/views/properties#properties). It can be `text`, `password` or `number`. ## Handling Click Events Like most components, Input Groups have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Input Group is the `onDataChange` event, which is triggered when the component is clicked and the value is changed. To Handle the event, double-click the value for the [onDataChange](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#ondatachangemethodid) property in the [Properties Editor](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/views/component-properties-editor.md). You will see the [Method Selection Wizard](https://docs.servoy.com/reference/servoy-developer/object-editors/method-selection-wizard). You'll have the option to select an existing Method or create a new Method. The method will be called when the Input Group's `onDataChange` event is fired and the [Event](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent) object will be passed to it.

Create method to handle the onDataChange event

```javascript /** * * @param oldValue * @param newValue * @param {JSEvent} event * * @return {Boolean} * * @private * * @properties={typeid:24,uuid:"28F84381-D7B4-44B3-8A5E-771C82C1A1D6"} */ function onDataChange(oldValue, newValue, event) { if(newValue.includes('USA')){ elements.info_usa.visible = true; }else {elements.info_usa.visible = false;} return true; } ``` {% hint style="info" %} See the [Input Group reference](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group) for a comprehensive list of [all events](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#events) {% endhint %} ## Modifying an Input Group at Runtime Input Groups, like many components, can be modified at runtime through code. Below are a few examples of controlling a Input Group from code. ### Enabling / Disabling an Input Group You can easily change the `enabled` state of an Input Group at runtime. Example: ```javascript function disableInputGroup(){ elements.myInputGroup.enabled = false; } ``` ### Hiding/Showing an Input Group You can easily change the `visible` state of a Input Group at runtime. Example: ```javascript function hideInputGroup(){ elements.myInputGroup.visible = false; } ``` ## Calling Input Group API Methods Like most components, an Input Group has API methods which can be called from code. Below is an example of common API calls. ### Add an AddOn You can easily add an AddOn to an Input Group using the [`addAddOn`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addaddon) method. Example: ```javascript function AddAddOnInputGroup(){ elements.myInputGroup.addAddOn({text:"new addOn", position:'LEFT'}); } ``` ### Add an AddOnButton You can easily add an AddOnButton to an Input Group using the [`addAddOnButton`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#addaddon) method. Example: ```javascript function AddAddOnButtonInputGroup(){ elements.myInputGroup.addAddOnButton({text:'new btn', position:'RIGHT', onAction:onAction}); } ``` ### Remove AddOns You can easily remove all AddOns of an Input Group using the [`clearAddOns`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#clearaddons) method. Example: ```javascript function removeAllAddOns(){ elements.myInputGroup.clearAddOns(); } ``` ### Remove AddOnButtons You can easily remove all AddOnButtons of an Input Group using the [`clearAddOnButtons`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#clearaddonbuttons) method. Example: ```javascript function removeAllAddOnButtons(){ elements.myInputGroup.clearAddOnButtons(); } ``` ### Add CSS Style Class You can easily add a style class to an Input Group using the [`addStyleClass`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#api) method. Example: ```javascript function AddStyleClassInputGroup(){ elements.myInputGroup.addStyleClass('mycssclass'); } ``` {% hint style="info" %} See the [Input Group reference](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group) for a complete list of programmable [properties](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#properties) and [methods](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group#api). {% endhint %} ### Related Articles The following articles are recommended for additional reading * [Inputgroup Reference Documentation](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/input-group) * [Styling and Themes](https://docs.servoy.com/guides/develop/application-design/styling-and-themes) * [Scripting the UI](https://docs.servoy.com/guides/develop/programming-guide/scripting-the-ui) --- # 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.servoy.com/guides/develop/application-design/ui-components/input-controls/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.