Components
form

text-field

8min

The text field is a versatile component, allowing many variations and configurations. It allows users to enter letters, numbers, and special signs on a single or multiple lines.

Text Field Preview
Text Field Preview


Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.



Core structure



instanceId

Provide a unique Id for the component that can be referenced elsewhere.

label

Give the field a label. Label is displayed as placeholder when no value is provided.

Other options



autoCapatilize

This property automatically capatilzes certain parts of the text input depending on the selection made. The keyboard caps lock is automatically set depending on the selection made. This property is not supported by certian keyboard types such as name-phone-pad. The following options are available: characters - capatilizes the all characters. sentences - capatilizes all words in a sentence. none - nothing is automatically capatalized. words - capatilizes all words.

color

There is a list of colors available. The color is used in combination with the condition when. See Jigx color palette for the available color options.

errortext

Add text, string, or expressions to show text under the text-field indicating an error/invalid value in the field. Text is shown in isNegative (red) styling with a red exclamation icon on the right.

format

Text format of the value entered. For example, percentage or currency. Formatting only displays in the app when the input field is set to disabled (read-only).

helperText

Add text, string, or expressions to guide users by showing text under the number-field. Helper text is displayed only when there is no errorText.

KeyboardType

Determines which keyboard to open. There is a list to select from, certain keyboard selections require a specific device or virtual keyboard.

icon

There is a list of icons available, see Jigx icons for more information.

initialValue

The initialValue is the value that will be displayed in the text-field when the form is initially loaded. You can use this property to preset the field with default text so that you do not have to manually select it. Useful when creating an edit or update form. Using the reset-state action with initialValues does not clear the field, it resets the field back to it's initialValue.

isAutocorrected

Set to false, disables auto-correct. The default value is true.

isAutoFocused

If true the text-field will get focus immediately after the form is displayed and the keyboard will be opened automatically.

isHidden

If true the text-field will be hidden on the form. If set to false the field will be shown.

isIgnored

When true, the field will be ignored when submitting the form and the content will not be stored.

isMultiline

Set to true allows for multiple line text input. The default value is false setting the field to single line.

isOptionalLabelHidden

If the field is optional you can turn off the "(optional)" label by setting this field to true. This property works in combination with isRequired: false.

isRequired

Set to true when the field is required. Useful when you use it in form submission as the submit button remains disabled until the text-field has an input. Set to false the field is optional and will have (optional) in the label.

isReturnKeyEnabledAutomatically

When set to true, the keyboard disables the return/done key when there is no text and automatically enables it when there is a text. The default value is false.

isSensitive

If set to true, the input obscures the text entered so that sensitive text stays secure. For example, bank card account details, passwords or salary details.

istextClearedOnFocus

When set to true, the text-field is automatically cleared when editing begins.

minLength

Specifies the minimum number of characters allowed in the field.

maxLength

Specifies the maximum number of characters allowed in the field.

nextProperty

Name of the property you want to focus next in the form when you use return/next on a keyboard.

returnKeyType

Determines the label of the return key on the keyboard, for example, done, search, join or next. On Android you can use returnKeyLabel.

style

The following property settings are available: - flex - Flex property if rendered inside row. - isBusy - Displays spinner on right side of field. It removes any configured icon. - isDisabled - disables the number-field preventing any input text. - isPositive - a green icon displays on the right of the number-field. More than one can be true. It will be evaluated based on priority.

textArea

Sets the height of the text area. This property should be used in conjunction with isMultiline. The following property settings are available: - dynamic allows the height to change based on the text content. - small - medium - large set the height to a relative size with a dynamic edit size. The default is undefined, which uses a static height.

textContentType

If you have setup your phone with your details these can be used as autofill hints to select for populating the text-field. For iOS 11+ you can set textContentType to username or password to enable autofill of login details from the device keychain. For iOS 12+ newPassword can be used to indicate a new password input the user may want to save in the keychain, and oneTimeCode can be used to indicate that a field can be autofilled by a code arriving in an SMS. To disable autofill, set textContentType to none.

Value

The value to show in the text-field when the form initially loads. This can be combined with the isDisable style to preset the value that cannot be edited on the form.

Actions



onChange

The action is triggered when the content in the text-field is changed. Use IntelliSense (ctrl+space) to see the list of available actions.

State Configuration

Key

Notes

=@ctx.component.state.

value

  • State is the variable of the component.

=@ctx.solution.state.

activeItemId now

  • Global state variable that can be used throughout the solution.

Considerations

  • When using the contentType: phone, ensure the phone number entered contains no spaces; this allows you to click on the field to initiate a call from your device.

Examples and code snippets 

Form with text-fields
Form with text-fields


In this example five text-fields are used, namely:

  1. The name text-field uses minLength and maxLength and helpText properties.
  2. The Zip/Postal code text-field uses the isRequired property set to false making the field optional. The autoCapitalize property is set to character to ensure the keyboard caps lock is on for all characters typed in the field.
  3. The claim details text field uses the isMultiline set to true and textArea set to medium allowing for a full description to be input.
  4. The OTP text-field property use the errorText and isSensitive properties ensuring the OTP number is obscured.
  5. The submission text-field is set as style: IsDisabled: true with a color and icon to be displayed.

Examples:

See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

text-field (static)
text-field (dynamic)
datasources (dynamic)


Use textContentTypes to autofill text-fields

Setting certain information in your device, for example in Settings on iPhone, will allow you to be able to autofill forms quickly and accurately. Then use the contentType property in the text-field on a form to specific the type, such as name, address, credit-card and more. If the information is available on the device, tapping on the field will provide an autofill hint that can be selected and the field will autofill with the details.



Autofill text fields
Autofill text fields

content-type.jigx


See also



Updated 04 Nov 2024
Doc contributor
Did this page help you?
Yes
No