# text-input

## Overview

`text-input` allows a user to type information in a text field.

{% hint style="info" %}
**Version Compatibility**

`text-input` was introduced in version **4.72.0** of the JourneyApps Runtime.
{% endhint %}

### Basic Example

```xml
<var name="job_name" type="text"/>
<text-input label="Job name" bind="job_name" required="true" />
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-45c3a4532ccb406762327bbdc941000d49cc123e%2Ftext-input-example.png?alt=media)

## Standard Attributes

### `bind`

{% content-ref url="../xml-fields/bind" %}
[bind](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/bind)
{% endcontent-ref %}

{% hint style="info" %}
**Note**:

* If the `bind=""` option for a `text-input` refers to an `integer` or `number` field or variable, a numeric keyboard will be provided.
* When `bind=""` refers to a field or variable of type `text`, it is also possible to use different keyboard types using Text Subtypes (configured on the field or variable)
  {% endhint %}

### `label`

{% content-ref url="../xml-fields/label" %}
[label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label)
{% endcontent-ref %}

### `required`

{% content-ref url="../xml-fields/required" %}
[required](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/required)
{% endcontent-ref %}

## Advanced Attributes

### `align-content`

{% content-ref url="../xml-fields/align-content" %}
[align-content](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-content)
{% endcontent-ref %}

### `align-label`

{% content-ref url="../xml-fields/align-label" %}
[align-label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-label)
{% endcontent-ref %}

### `clear-button-visibility`

{% content-ref url="../xml-fields/clear-button-visibility" %}
[clear-button-visibility](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/clear-button-visibility)
{% endcontent-ref %}

### `disabled`

{% content-ref url="../xml-fields/disabled" %}
[disabled](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/disabled)
{% endcontent-ref %}

### `display`

**Optional**

**Type**: `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default**: `unset`

Override what is displayed in the `text-input` when the user is not editing its content.

```xml
<text-input bind="weight" label="Total weight" display="{weight} pounds"/>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-02a1aa53f49263d95bcb052667e86d0f0c2ad7db%2Ftext-input-display.png?alt=media)

### `enable-number-scrolling`

**Optional**

**Type**: `boolean`

**Default**: `false`

{% hint style="info" %}
**Version compatibility**

`enable-number-scrolling` was introduced in version **4.84.0** of the JourneyApps Runtime.
{% endhint %}

Specify whether a `text-input` that is bound to a number field/variable should increase and decrease the number value when a user scrolls over the input using a mouse.

Note: Prior to runtime version 4.84.0, number values will always increase/decrease with mouse scrolling in the `text-input` component.

### `error-message`

{% content-ref url="../xml-fields/error-message" %}
[error-message](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/error-message)
{% endcontent-ref %}

### `id`

{% content-ref url="../xml-fields/id" %}
[id](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id)
{% endcontent-ref %}

### `label-case`

{% hint style="info" %}
**Version compatibility**

`label-case` was introduced in version **4.80.0** of the JourneyApps Runtime.
{% endhint %}

{% content-ref url="../xml-fields/label-case" %}
[label-case](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-case)
{% endcontent-ref %}

### `label-color`

{% content-ref url="../xml-fields/label-color" %}
[label-color](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-color)
{% endcontent-ref %}

### `modifier-text`

{% content-ref url="../xml-fields/modifier-text" %}
[modifier-text](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/modifier-text)
{% endcontent-ref %}

### `on-change`

{% content-ref url="../xml-fields/on-change" %}
[on-change](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/on-change)
{% endcontent-ref %}

### `paragraph-resize-mode`

{% hint style="info" %}
**Version compatibility**

`paragraph-resize-mode` was introduced in version 4.89.17 of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `auto` | `manual` | `none`

**Default**: `manual`

Specify in what way paragraph text inputs should be resizable. This attribute is only applied if the `bind` field is of type `text:paragraph`.

* `auto`: The input will automatically resize to fit the text, limited by the `height` attributes below.
* `manual`:  The user is in control of the height of the input (not available on mobile devices).
* `none`: No resizing will occur, will only use the `height` attributes below.

### `paragraph-height-min`

{% hint style="info" %}
**Version compatibility**

`paragraph-height-min` was introduced in version 4.89.17 of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `number`

**Default**: `50`

Specify the minimum height of the text-input. This attribute is only applied if the `bind` field is of type `text:paragraph`.

### `paragraph-height-max`

{% hint style="info" %}
**Version compatibility**

`paragraph-height-max` was introduced in version 4.89.17 of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `number`

**Default**: `null` (no limit)

Specify the maximum height of the text-input. This attribute is only applied if the `bind` field is of type `text:paragraph`.

### `paragraph-height`

{% hint style="info" %}
**Version compatibility**

`paragraph-height` was introduced in version 4.89.17 of the JourneyApps Runtime.
{% endhint %}

**Type**: `number`

**Default**: `null` (no limit)

Shorthand to set both `paragraph-height-min` and `paragraph-height-max`. Overridden if the these two attributes are also present. This attribute is only applied if the `bind` field is of type `text:paragraph`.

### `placeholder`

{% content-ref url="../xml-fields/placeholder" %}
[placeholder](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/placeholder)
{% endcontent-ref %}

### `required`

{% content-ref url="../xml-fields/required" %}
[required](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/required)
{% endcontent-ref %}

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

### `text-direction`

{% hint style="info" %}
**Version compatibility**

`text-direction` was introduced in version **4.86.1** of the JourneyApps Runtime.
{% endhint %}

**Optional**

**Type**: `left-to-right` | `right-to-left`

**Default**: `left-to-right`

Specify the direction of text entry into the component.

## Component Methods

The following component methods are available when an [`id`](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id) is assigned to the component and `component.textInput({id:'my-id'})` is called from JS/TS:

### `clear`

Programmatically clear a value entered into the `text-input`.

### `focus`

Programmatically focus the `text-input` to allow the user to enter a value.

```javascript
function focus(){
    component.textInput({id: 'my-id'}).focus();
}
```

### `scrollIntoView`

Programmatically scroll until the `text-input` is visible in the view.