jc-text-field
The schema defines the following properties:
Property | Type | Required | Description |
type | component.text-field | true | |
instanceId | string | true | |
when | Expression | boolean | false | |
options | Text Field Options | true | |
Properties of the options object:
Property | Type | Required | Description |
isTextClearedOnFocus | boolean | false | If true, clears the text field automatically when editing begins. |
isReturnKeyEnabledAutomatically | boolean | false | If true, the keyboard disables the return key when there is no text and automatically enables it when there is text. The default value is false. |
keyboardType | enum<string> | false | Determines which keyboard to open, e.g.numeric. |
isSensitive | boolean | false | If true, the text input obscures the text entered so that sensitive text like passwords stay secure. |
label | string | Expression | TextWithFormat | TextLocale | true | Label is displayed as placeholder when no value. |
icon | icon-name | string | false | Trailing icon. |
helperText | string | Expression | TextWithFormat | TextLocale | false | Helper text is displayed only when there is no errorText. |
errorText | string | Expression | TextWithFormat | TextLocale | false | Text displayed when field's value is not valid. When not empty it displays isNegative style as well. |
style | Date Picker Style | false | More of them can be true. It will be evaluated based on priority. |
isAutoFocused | boolean | false | If true it will get focus immediately after it is displayed to user. |
isRequired | boolean | string | false | True when the field is required. Useful when you use it in form submission. |
isOptionalLabelHidden | boolean | string | false | If the field is optional you can turn off the "(optional)" label if you want. |
isIgnored | boolean | string | false | When true, the field will be ignored when submitting the form. |
isHidden | boolean | string | false | If true it will be hidden to user. |
initialValue | string | Expression | TextWithFormat | TextLocale | false | Initial value of the relevant field. You can use this to preset value, so user doesn't need to add anything and use this "default". |
value | string | Expression | TextWithFormat | TextLocale | false | The value to show for the field. Text field is a controlled component, which means the internal value will be forced to match this value prop if provided. In most cases, you don't need to use this. |
onChange | false | Action Keg component that will be triggered when value is changed | |
nextProperty | string | false | Name of the property you want to focus next in form when you use "submit" on virtual keyboard. |
color | object[] | false | Changing color of field based on conditions. First evaluated to true will be used. |
format | Date & Number Format | false | Text Format of the value. Format is enabled only if field is configured to disabled. `style.isDisabled: true` |
autoCapitalize | enum<string> | false | Can tell TextField to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad. |
isAutoCorrected | boolean | false | If false, disables auto-correct. The default value is true. |
maxLength | number | false | Limits the maximum number of characters that can be entered. |
minLength | number | false | Limits the minimum number of characters that has to be entered. |
isMultiline | boolean | false | If true, the text input can be multiple lines. The default value is false. |
returnKeyType | enum<string> | false | Determines how the return key should look. On Android you can also use returnKeyLabel. |
textContentType | enum<string> | false | Semantic meaning for the content that users enter. 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. |
textArea | enum<string> | false | Sets the height of the text area:- 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. |
Determines which keyboard to open, e.g.numeric.
This element must be one of the following enum values:
- default
- email-address
- numeric
- phone-pad
- ascii-capable
- numbers-and-punctuation
- url
- number-pad
- name-phone-pad
- decimal-pad
- twitter
- web-search
- visible-password
Label is displayed as placeholder when no value.
icon (icon-name | string)
Trailing icon.
The object must be any of the following types:
Helper text is displayed only when there is no errorText.
Text displayed when field's value is not valid. When not empty it displays isNegative style as well.
More of them can be true. It will be evaluated based on priority.
Properties of the style object:
Property | Type | Required | Description |
isDisabled | boolean | string | false | Change style to disabled. User can't do anything with field when disabled. |
isBusy | boolean | string | false | Displays spinner on right side of text field. It removes icon if any. |
isPositive | boolean | string | false | Displays success icon on right side of text field. |
flex | number | false | Flex property if rendered inside row |
Change style to disabled. User can't do anything with field when disabled.
The object must be any of the following types:
Displays spinner on right side of text field. It removes icon if any.
The object must be any of the following types:
Displays success icon on right side of text field.
The object must be any of the following types:
True when the field is required. Useful when you use it in form submission.
The object must be any of the following types:
If the field is optional you can turn off the "(optional)" label if you want.
The object must be any of the following types:
When true, the field will be ignored when submitting the form.
The object must be any of the following types:
If true it will be hidden to user.
The object must be any of the following types:
Initial value of the relevant field. You can use this to preset value, so user doesn't need to add anything and use this "default".
The value to show for the field. Text field is a controlled component, which means the internal value will be forced to match this value prop if provided. In most cases, you don't need to use this.
Action Keg component that will be triggered when value is changed
Changing color of field based on conditions. First evaluated to true will be used.
The object is an array with all elements of the type object.
The array object has the following properties:
Text Format of the value. Format is enabled only if field is configured to disabled. style.isDisabled: true
Can tell TextField to automatically capitalize certain characters. This property is not supported by some keyboard types such as name-phone-pad.
This element must be one of the following enum values:
- none
- sentences
- words
- characters
Determines how the return key should look. On Android you can also use returnKeyLabel.
This element must be one of the following enum values:
- done
- go
- next
- search
- send
- none
- previous
- default
- emergency-call
- google
- join
- route
- yahoo
Semantic meaning for the content that users enter. 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.
This element must be one of the following enum values:
- none
- URL
- addressCity
- addressCityAndState
- addressState
- countryName
- creditCardNumber
- emailAddress
- familyName
- fullStreetAddress
- givenName
- jobTitle
- location
- middleName
- name
- namePrefix
- nameSuffix
- nickname
- organizationName
- postalCode
- streetAddressLine1
- streetAddressLine2
- sublocality
- telephoneNumber
- username
- password
Sets the height of the text area:
- 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.
This element must be one of the following enum values:
- small
- medium
- large
- dynamic
Default: "undefined"
