# Input Group

(part of package '[Bootstrap Extra Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

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\<CustomType\<bootstrapextracomponents-input-group.AddOnButton>>](#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\<CustomType\<bootstrapextracomponents-input-group.AddOn>>](#addon)

***

### dataProvider

Bound data provider identifier for the input group's value. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### editable

Flag indicating whether the input group is editable. Type: [Protected](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: true

***

### enabled

Flag indicating whether the input group is enabled for user interaction. Type: [Enabled](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: true

***

### format

Format string used to display and parse the input group's value. Type: [Format](https://docs.servoy.com/servoy-developer/component_and_service_property_types#format)

***

### inputType

The input type for the text field within the input group (e.g. text, password, number). Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "text"

***

### placeholderText

Placeholder text displayed when the input field is empty. Type: [Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***

### readOnly

Flag indicating whether the input group is read-only. Type: [Protected](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: false

***

### styleClass

CSS style classes applied to the input group. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### tabSeq

Tab sequence order for keyboard navigation. Type: [Tabseq](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tabseq)

***

### toolTipText

Tooltip text displayed when hovering over the input group. Type: [Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***

### visible

Flag indicating whether the input group is visible. Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onAction(event)

Fired when the input group is activated.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} 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}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} oldValue The previous value from the data provider
> * {[${dataproviderType}](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)} newValue The new value to be set in the data provider
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the data change

**Returns:** {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)}

***

### onFocusGainedMethodID(event)

Fired when the input group gains focus.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object containing details about the focus gained event

***

### onFocusLostMethodID(event)

Fired when the input group loses focus.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object containing details about the focus lost event

***

### onRightClick(event)

Fired when the input group is right-clicked.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} 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\<bootstrapextracomponents-input-group.AddOn>](#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\<bootstrapextracomponents-input-group.AddOnButton>](#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\<CustomType\<bootstrapextracomponents-input-group.AddOnButton>>](#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\<CustomType\<bootstrapextracomponents-input-group.AddOn>>](#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\<bootstrapextracomponents-input-group.AddOn>

* attributes
  * Additional attributes for the add-on element.
  * **Type**: [map](https://docs.servoy.com/servoy-developer/component_and_service_property_types#map)
* position
  * The position of the add-on relative to the input field (e.g. LEFT or RIGHT).
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
  * **Default Value**: "LEFT"
* text
  * The text displayed on the add-on.
  * **Type**: [tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

## AddOnButton

Represents an add-on button element attached to the input group. scripting type: CustomType\<bootstrapextracomponents-input-group.AddOnButton>

* attributes
  * Additional attributes for the add-on button element.
  * **Type**: [map](https://docs.servoy.com/servoy-developer/component_and_service_property_types#map)
* imageStyleClass
  * CSS style classes applied to the add-on button's image or icon.
  * **Type**: [styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)
* name
  * The unique name identifier for the add-on button.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* onAction
  * The function to be executed when the add-on button is clicked.
  * **Type**: [function](https://docs.servoy.com/servoy-developer/component_and_service_property_types#function)
* onDoubleClick
  * The function to be executed when the add-on button is double-clicked.
  * **Type**: [function](https://docs.servoy.com/servoy-developer/component_and_service_property_types#function)
* onRightClick
  * The function to be executed when the add-on button is right-clicked.
  * **Type**: [function](https://docs.servoy.com/servoy-developer/component_and_service_property_types#function)
* position
  * The position of the add-on button relative to the input field (e.g. LEFT or RIGHT).
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
  * **Default Value**: "RIGHT"
* styleClass
  * CSS style classes applied to the add-on button.
  * **Type**: [styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)
  * **Default Value**: "btn-default"
* text
  * The text displayed on the add-on button.
  * **Type**: [tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***