Back to Website
Show / Hide Table of Contents

Input text

  • Last updated on December 29, 2023
  • •
  • 4 minutes to read

This widget displays a field for the text input.

{
    "name": "my-input-text",
    "type": "input-text",
    "params": {...}
}

Hint inside a field

This hint explains to customers where they can input some data. It works by the placeholder property.

Placeholder property show hint inside the input field.

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "This is a hint"
  }
}

Hint over a field

The label property allows you to create a hint over the input field.

The label property show hint over the input field.

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "label": "Input your text below"
  }
}

Hint under a field

The supportText property shows the hint under the input field.

The SupportText shows a hint under the unput field.

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "label": "Input your text below",
    "type": "text",
    "isTextArea": true,
    "supportText":"This is your text!"
  }
}

Type of input value

You can manage what data type the entered value should correspond to. To do this, add the type property.

The values can be:

  • text for letters and numbers.
  • number only for numbers.

Input only numbers.

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "label": "Input your text below",
    "type": "number"
    }
}

Input by using arrows

You can click the arrows in the right part of the field or press the Up and Down keys on your keyboard to input a number.

Input a number by arrows

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "label": "Input your text below",
    "type": "number"
  }
}

Limits for numbers

For numbers, you can limit the input value by the min and max properties. In the following example, you can only input the numbers from 3 to 6.

Limitations on the number input

When this widget appears, its initial value will be the minimal value, and the user will not be able to enter a value greater than the maximal value.

Managing limitations by arrows

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "label": "Input your text below",
    "type": "number",
    "min": 3,
    "max": 6
  }
}

Limits for letters

For text, you can limit the quantity of letters by the maxLength property.

Limitations on the quantity of letters

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "label": "Input your text below",
    "type": "text",
    "maxLength": 8
  }
}

Initial value

By default, this widget appears with an empty text. However, you can specify the default value to be displayed. Prescribed value in the input field.

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "label": "Input your text below",
    "type": "text",
    "defaultValue":"1-234-"
  }
}

Field size

This widget may appear not only as a single-line field, but also as a text area. You can use the isTextArea property to enable this appearance and the rows property to define the widget height.

Managing the size of the input field.

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "label": "Input your text below",
    "type": "text",
    "isTextArea": true,
    "rows": 10   
  }
}

Regular expressions

To set an input mask, use the pattern property with a regular expression. In the following example, we use a regular expression to make the user to input an email address. Note that if the input does not meet the pattern, the corresponding message appears under the field.

Regular expression in the input field.

{
  "name": "my-input-text",
  "type": "input-text",
  "params": {
    "placeholder": "Type here...",
    "pattern": "^\\S+@\\S+\\.\\S+$",
    "label": "Input your email the `example@example.com` format",
    "type": "text"
  }
}

Referring to a value

You can refer to the entered value by using the "{{$['my-input']._}}" expression. Read the Dynamic expressions article, to learn more about the usage of Java Script in widgets.

In the following example, the checkbox widget displays the value of the input-text widget.

Referring to the value of the widget.

{
  "name": "my-checkbox",
  "type": "checkbox",
  "params": {
    "prompt": "{{$['my-input']._}}",
    "value": false
  }
},
{
  "name": "my-input",
  "type": "input-text",
  "params": {
    "isTextArea": true
  }
}    

onChange

Use the onChange object to trigger some actions when a customer changes the text.

In the following example, we set the value of input-text to the static-text widget as soon as the customer adds or deletes a character in the input field.

Duplicating value in static text on the Change event

{
  "name": "static",
  "type": "static-text",
  "params": {
    "text": ""
  }
},
{
  "name": "input",
  "type": "input-text",
  "params": {
    "isTextArea": true,
    "onChange": ["{{#function $['static'].text = $['input']._}}"]
  }
}

Params

Name Type Description Default value
placeholder string hint inside the field empty string
label string hint over the field empty string
supportText string hint under the field empty string
type "text" | "number" input value format "text"
defaultValue string text written in a field empty string
min number minimum allowed value for numbers -999999
max number maximum allowed value for numbers 999999
maxLength number maximum allowed length for text undefined
isTextArea boolean if true, appears as a multiline text area false
row number for text areas, defines the widget height 2
pattern string defines regular expressions ".+"
onChange Function | Array handler of the event of changing the widget value undefined
Was this page helpful?
Thanks for your feedback!
Back to top Copyright © 2001–2024 Aurigma, Inc. All rights reserved.
Loading...
    Thank for your vote
    Your opinion is important to us. To provide details, send feedback.
    Send feedback