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


---

# 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.journeyapps.com/reference/build/ui-components/all-ui-components/text-input.md?ask=<question>
```

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.