# TextBoxGroup

## Overview

This guide will show how to use textboxGroup in your applications. See how easy it is to drag and drop textboxGroup onto your forms and connect them to your business logic. textboxGroup can be modified, styled and even changed at runtime.

To see a live sample of the component you can go [here](https://samples-dev.samples.servoy-cloud.eu/solution/components?a=textBoxGroup).

## Get Started

## Modifying a textboxGroup at Design-Time

textboxGroup, like all components, have properties which can be modified at design-time to set the appearance and behavior of the component. Select the textboxGroup 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.

### Setting the placeholderText

The text displayed inside the textboxGroup can be modified by setting its [`placeholderText`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/textbox-group#placeholdertext) property. This will just be plain text which will be shown as an instruction on what you can do within the textbox. When you insert a value in the textboxGroup the placeholderText will disappear and your inserted text will take it's place. For more options open the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).

### Setting the faclass

The icon attached on the textbox can be changed from [`faclass`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/textbox-group#faclass) property. You can use different icons from fontawosome. For more options open the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).

### Setting the inputType

The inputType of the textbox and be changed from [`inputType`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/textbox-group#inputtype) property. Here we have two types, text and password. For more options open the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).

### Setting the tooltipText

TextBoxGroup, like many components, can display tooltip messages when a user hovers their cursor. Most often, this will just be plain text that describes what will happen on-click. In this case, just enter the value into the editor. For more options open the [Text Property Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor).

### Styling

Like all components, a textboxGroup can be styled using themes, variants and raw CSS. To apply any available style class, simply enter one or more space-delimited values for the `styleClass` property.

## Handling Events

Change this to match your component - if the case:

Like most components, textboxGroup have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a textboxGroup is the `onDataChange` event, which is triggered when the textboxGroup is clicked or the user hits the `Enter` key while the textboxGroup has focus.

To Handle the event, double-click the value for the `onDataChange` 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 select an existing Method or create a new Method. The method will be called when the TextBoxGroup's `onDataChange` event is fired and the [Event](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent) object will be passed to it.

```javascript
/**
 * @param {JSEvent} event
 *
 * @properties={typeid:24,uuid:"A74C281C-00AA-46AA-BB38-500C937F2D1A"}
 */
function onDataChange(event) {
	// Enter custom code
}
```

{% hint style="info" %}
See the [textboxGroup reference](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/textbox-group) for comprehensive list of [all events](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/textbox-group#events)
{% endhint %}

## Modifying a textboxGroup at Runtime

textboxGroup, like many components, can be modified at runtime through code. Below are a few examples of controlling a textboxGroup from code.

### Enabling / Disabling a textboxGroup (delete/change if not the case)

You can easily change the `enabled` state of a textboxGroup at runtime.

```javascript
function disableTextBoxGroup(){
	elements.myTextBoxGroup.enabled = false;
}
```

### Hiding/Showing a textboxGroup (delete/change if not the case)

You can easily change the `visible` state of a textboxGroup at runtime.

```javascript
function hideTextBoxGroup(){
	elements.myTextBoxGroup.visible = false;
}
```

## Calling textboxGroup API Methods

Like most components, a textboxGroup has API methods which can be called from code. Below is an example of common API calls.

### Give Keyboard Focus ()

You can easily give keyboard focus to a textboxGroup using the [`requestFocus`](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/textbox-group#requestfocus) method.

```javascript
function focusTextBoxGroup(){
	elements.myTextBoxGroup.requestFocus();
}
```

### Add CSS Style Class ()

You can easily add a style class to a textboxGroup using the `addStyleClass` method.

```javascript
function AddStyleClassTextBoxGroup(){
	elements.myTextBoxGroup.addStyleClass('mycssclass');
}
```

## Related Articles

The following articles are recommended for additional reading:

* [textboxGroup Reference Documentation](https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/textbox-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)