Text Input
The Text input component is an input field that allows users to enter information. It can also be used to display prepopulated information to the user.
Example
You can use the Text input component to create an app to modify your customer information. In this example:
- Users can view the Customer ID in the Text input component.
- Users can edit the Short name in the Text input component.
Note: The Text input component follows the WCAG 2.0 AA accessibility guidelines. See the Properties section for accessibility configuration tips.
Properties
The following Text input component properties are available:
Main
Property | Description | Required |
---|---|---|
Component ID | Enter a unique name for the component. See Templating in components for more details. | Yes |
Label | Enter the name you want to be displayed above the component. To make the component accessible to assistive technology, make sure to be as descriptive as possible. For example, if the expected input is an email, enter a descriptive label such as 'Enter your email'. | Yes |
Placeholder | Enter the text you want to display in the field before the user takes any action. By default, 'Placeholder' text is displayed. To make the component accessible to assistive technology, make sure to be as descriptive as possible. For example, if the expected input is an email, enter a descriptive placeholder such as 'example@email.com'. | No |
Description | Add a description for the component. The text is displayed above the component. | No |
Hint | Enter a text under the component to give the user any additional information. Validation messages have priority and will hide the hint temporarily. | No |
Default value | Enter a value to appear by default. | No |
Note: See Templating drop-down for more details on rendering dynamic content using Liquid.
Styles
Property | Description | Required |
---|---|---|
Input format | Select a format from the drop-down menu. | No |
Size | Select a size from the drop-down menu. | No |
Max length | Enter the maximum number of characters allowed. | No |
Validation
Property | Description | Required | |
---|---|---|---|
Optional field | Turn on to make the component optional. By default, the component is required. | No | |
Add rule | Add rules in Liquid to specify when the component is required. If no rules are set, the component will be required in all instances. | No | |
Message | Enter a message to be displayed if the user does not fill in the input. A default message is otherwise shown. | No | |
Choose common pattern | Select the expected input data from the drop-down. See Available common patterns for more details. | No | |
Additional validations | Select any or all checkboxes to add validations. | No | |
Error | Select the checkbox to add a red error style validation to the component. | No | |
Add rule | Add rules in Liquid to specify when the error validation is shown. | Yes | |
Error message | Enter a message to be displayed if the user fills in the input incorrectly. | Yes | |
Warning | Select the checkbox to add an orange warning style validation to the component. | No | |
Add rule | Add rules in Liquid to specify when the warning validation is shown. | Yes | |
Warning message | Enter a message to give the user advice on how to better fill in the input. | Yes | |
Positive | Select the checkbox to add a green positive style validation to the component. | No | |
Add rule | Add rules in Liquid to specify when the positive validation is shown. | Yes | |
Positive message | Enter a message to tell the user that the input has been correctly filled in. | Yes |
Note: See Add rules to trigger properties for more details.
Interactions
Property | Description | Required |
---|---|---|
Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
Add rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Disabled | Select the checkbox to disable the component in the end-user app. | No |
Add rule | You can set rules to disable the component using Liquid. If no rules are set, the component will be disabled in all instances. | No |
Read only | Select the checkbox to set the component to read-only. | No |
Add rule | You can set rules to prevent the user form editing the component, using Liquid. If no rules are set, the component will be read-only in all instances. | No |
Note: See Add rules to trigger properties for more details on setting rules for these properties.
Accessibility
Property | Description | Required |
---|---|---|
Aria label | Enter a text that allows assistive technology to attach a label to the component. | No |
Title | Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app. | No |
Events
The Text input component supports the On update event. See Events and actions for more details.