What's NewDeveloper CommunitySupportStatus
Search
⌃K
Links

text-input

Overview

text-input allows a user to type information in a text field.
Version Compatibility
text-input was introduced in version 4.72.0 of the JourneyApps Runtime.

Basic Example

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

Standard Attributes

bind

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)

label

required

Advanced Attributes

align-content

align-label

clear-button-visibility

disabled

display

Optional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: unset
Override what is displayed in the text-input when the user is not editing its content.
<text-input bind="weight" label="Total weight" display="{weight} pounds"/>

enable-number-scrolling

Optional
Type: boolean
Default: false
Version compatibility
enable-number-scrolling was introduced in version 4.84.0 of the JourneyApps Runtime.
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

id

label-case

Version compatibility
label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

label-color

modifier-text

on-change

placeholder

required

show-if and hide-if

text-direction

Version compatibility
text-direction was introduced in version 4.86.1 of the JourneyApps Runtime.
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 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.
function focus(){
component.textInput({id: 'my-id'}).focus();
}

scrollIntoView

Programmatically scroll until the text-input is visible in the view.
Previous
single-choice-radio
Next
time-input
Last modified 1mo ago