# TextBox

(part of package '[Bootstrap Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/bootstrap-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)

TextBox is a text input component styled with Bootstrap. It allows users to enter single-line text values.\
The component supports various input types (e.g. text, password, email, etc.) and includes features such as autocomplete and error messaging.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### autocomplete

Html autocomplete property of the input field. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "off"

***

### dataProviderID

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

***

### editable

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

***

### enabled

Flag indicating whether the text box 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 text box value. Type: [Format](https://docs.servoy.com/servoy-developer/component_and_service_property_types#format)

***

### inputType

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

***

### placeholderText

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

***

### selectOnEnter

Indicates whether the text box content should be automatically selected when the field gains focus. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

***

### styleClass

Set the styleclasses that should be applied at to this component Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass) Default Value: "form-control"

***

### styleClassForEye

Set the styleclasses for the eye when inputType on this component is password-with-eye, you need to add main(not manadatory), eye and eye-slash classes in this order, default value for NG is 'glyphicon glyphicon-eye-open glyphicon-eye-close' and for TiNG 'fa fa-eye fa-eye-slash' 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 text box. Type: [Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***

### visible

Whether the button is visible or not Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onActionMethodID(event)

Fired when the text box action is triggered (for example, when the Enter key is pressed).

**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, key pressed

***

### 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)

**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 text box 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 e.g. target element, timestamp

***

### onFocusLostMethodID(event)

Fired when the text box 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 e.g. target element, timestamp

***

### onRightClickMethodID(event)

Fired when the text box 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 e.g. target element, mouse coordinates

***

## API

### requestFocus(mustExecuteOnFocusGainedMethod)

Request the focus to this text field.

**Example:**

```js
myElement.requestFocus();
```

**Parameters:**

> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[mustExecuteOnFocusGainedMethod] If false will not execute the onFocusGained method; the default value is true

***

### setInputType(inputType)

Reset the dataProvider to null and change the inputType of the textbox.\
**Note:** the value of the dataProvider bound to this field will be automatically set to null

**Example:**

```js
myElement.inputType("tel");
```

**Parameters:**

> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} inputType Allowed values for inputType are *text, password, email, tel, date, time, datetime-local, month, week, number, color*

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if the inputType was successfully changed and the dataProvider was reset to null; false otherwise.

***

***