# Input Group (part of package '[Bootstrap Extra Components](/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components.md)')\ Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\ Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md) A component that combines an input field with optional add-ons and add-on buttons. This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components). ## Properties ### addOnButtons An array of add-on button objects attached to the input group.\ Each add-on button may have its own action handlers and styling. Type: [Array\>](#addonbutton) *** ### addOns An array of add-on objects attached to the input group.\ Each add-on provides additional content (such as icons or text) adjacent to the input field. Type: [Array\>](#addon) *** ### dataProvider Bound data provider identifier for the input group's value. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### editable Flag indicating whether the input group is editable. Type: [Protected](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true *** ### enabled Flag indicating whether the input group is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true *** ### format Format string used to display and parse the input group's value. Type: [Format](/reference/servoy-developer/component_and_service_property_types.md#format) *** ### inputType The input type for the text field within the input group (e.g. text, password, number). Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "text" *** ### placeholderText Placeholder text displayed when the input field is empty. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) *** ### readOnly Flag indicating whether the input group is read-only. Type: [Protected](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: false *** ### styleClass CSS style classes applied to the input group. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) *** ### tabSeq Tab sequence order for keyboard navigation. Type: [Tabseq](/reference/servoy-developer/component_and_service_property_types.md#tabseq) *** ### toolTipText Tooltip text displayed when hovering over the input group. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) *** ### visible Flag indicating whether the input group is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible) *** ## Events ### onAction(event) Fired when the input group is activated. **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the action event e.g. target element, mouse coordinates *** ### onDataChangeMethodID(oldValue,newValue,event) Handle changed data, return false if the value should not be accepted.\ JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope) - present since 2021.06 release **Parameters:** > * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} oldValue The previous value from the data provider > * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} newValue The new value to be set in the data provider > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the data change **Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} *** ### onFocusGainedMethodID(event) Fired when the input group gains focus. **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the focus gained event *** ### onFocusLostMethodID(event) Fired when the input group loses focus. **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the focus lost event *** ### onRightClick(event) Fired when the input group is right-clicked. **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the right-click event *** ## API ### addAddOn(addOn) Adds an addOn to this input group AddOn has the following properties: text - the text of the item\ position - LEFT or RIGHT (defaults to LEFT) **Parameters:** > * {[CustomType\](#addon)} addOn - object with text, position (LEFT, RIGHT) *** ### addAddOnButton(addOnButton) Adds an addOnButton to this input group AddOnButton has the following properties: text - the button text\ position - LEFT or RIGHT (defaults to RIGHT)\ onAction - function to be called on button click\ onDoubleClick - function to be called on button double click\ onRightClick - function to be called on button right click\ styleClass - the style class of the button (e.g. btn-danger)\ imageStyleClass - image style class of the button **Parameters:** > * {[CustomType\](#addonbutton)} addOnButton AddButtonOnToAdd *** ### clearAddOnButtons() Removes all addOnButtons from this input group *** ### clearAddOns() Removes all addOns from this input group *** ### requestFocus() Request the focus to this text field. **Example:** ```js myElement.requestFocus(); ``` *** ### setAddOnButtons(addOnButtons) Sets all addOnButtons of this input group AddOnButton has the following properties: text - the button text\ position - LEFT or RIGHT (defaults to RIGHT)\ onAction - function to be called on button click\ onDoubleClick - function to be called on button double click\ onRightClick - function to be called on button right click\ styleClass - the style class of the button (e.g. btn-danger)\ imageStyleClass - image style class of the button **Parameters:** > * {[Array\>](#addonbutton)} addOnButtons An array of AddOnButton objects to configure the input group's buttons, each with properties such as text, position, event handlers, and styling. *** ### setAddOns(addOns) Sets all addOns of this input group AddOn has the following properties: text - the text of the item\ position - LEFT or RIGHT (defaults to LEFT) **Parameters:** > * {[Array\>](#addon)} addOns AddOns - Array of objects with text, position (LEFT, RIGHT) *** ## Types ## AddOn Represents an add-on element attached to the input group. scripting type: CustomType\ * attributes * Additional attributes for the add-on element. * **Type**: [map](/reference/servoy-developer/component_and_service_property_types.md#map) * position * The position of the add-on relative to the input field (e.g. LEFT or RIGHT). * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * **Default Value**: "LEFT" * text * The text displayed on the add-on. * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) ## AddOnButton Represents an add-on button element attached to the input group. scripting type: CustomType\ * attributes * Additional attributes for the add-on button element. * **Type**: [map](/reference/servoy-developer/component_and_service_property_types.md#map) * imageStyleClass * CSS style classes applied to the add-on button's image or icon. * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) * name * The unique name identifier for the add-on button. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * onAction * The function to be executed when the add-on button is clicked. * **Type**: [function](/reference/servoy-developer/component_and_service_property_types.md#function) * onDoubleClick * The function to be executed when the add-on button is double-clicked. * **Type**: [function](/reference/servoy-developer/component_and_service_property_types.md#function) * onRightClick * The function to be executed when the add-on button is right-clicked. * **Type**: [function](/reference/servoy-developer/component_and_service_property_types.md#function) * position * The position of the add-on button relative to the input field (e.g. LEFT or RIGHT). * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * **Default Value**: "RIGHT" * styleClass * CSS style classes applied to the add-on button. * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) * **Default Value**: "btn-default" * text * The text displayed on the add-on button. * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) *** --- # 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/reference/servoyextensions/ui-components/input-control/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.