Input component

Accept user input on a page, such as with a text input field.

Overview

Add input components into a page to capture user input and data in a flow. This input can then be used in any way required, such as to trigger further events in the flow, determine the path of the flow, or simply to capture user data.

The type of input component presented to a user is determined by the content kind of the value that the user selection is saved to in the Save the state into field. See Value content kinds.

Value Content Kind	Description
Boolean	The component is presented as a checkbox, allowing a user to select (True) or de-select (False).
Date, Date/Time	Date: The component is presented as a date input field, allowing a user to enter a date or use a date selector. Date/Time: The component is presented as a date/time input field, allowing a user to enter a date & time, or use a date/time selector. - To enable time selection, the dateTimeFormat attribute must be added to the input component. See Attributes reference. - The dateTimeLocale attribute can also be added to change the default 'en-us' format to another locale format. See Formatting date and time values.
Number	The component is presented as a numeric input field; allowing a user to enter a numeric value, or use the arrow buttons to enter a numeric value.
Password	The component is presented as a password input field, allowing a user to securely enter a password; characters are masked using bullets.
String	The component is presented as a text input field, allowing a user to enter text.

General settings

Configure the general settings for the component.

Setting	Description
Name	Enter a name for the input component.
Label	Enter a label for the input component. The label is displayed above the component by default. Do not enter a label if you do not require this text to be shown.
Editable	Specify if the component can accept user input.
Autocomplete Tokens	You can specify autocomplete tokens for input and textarea components. When you configure tokens for the autocomplete attribute, the browser suggests saved information—such as email addresses and first or last names—for those components when you run a Flow. Use valid token values such as “on”, “off”, or a space-separated list of tokens that describe the type of information the browser should suggest. You can find the full list of valid tokens at MDN Web Docs.
Placeholder text	Enter a short hint to display in the field, such as an example of the expected value or format.
Help information about this component	Display help text directly below the component, for example to provide further information on how to use the component.

State

1. Select the value that you wish to save the user input data into.

2. Save the component state into: Click Select or create a new value to select an existing value or create a new value.

   The type of input component presented to a user is determined by the content kind of the value selected in this field. See Value content kinds.

Validation

Add client-side page validation to the component. You cannot add validation if you are saving state data into a boolean or object value.

1. Click Add Validation.
2. Select the validation Type.
3. Value: Enter a static value or select a variable.
   • Static value: Manually type a number to set a fixed validation limit.
   • Variable: Select an existing Flow state variable to set dynamic and flexible validation rules based on external data sources.
   note

   Using a variable allows you to update validation rules dynamically (for example, pulling limits from a database or changing them per environment) without needing to redeploy the Flow.

4. Enter a feedback Message to show to the user if the validation criteria is not met.
5. Click Update to add the validation item.

Setting	Description
Required	Specify if the component requires user input before the next step in the flow can be navigated to. For example, a user must complete the input for this field before they are allowed to progress in the flow. 1. Switch on the toggle to set the component as requiring input from a user before they can progress in the flow, such as to the next page for example. A red asterisk is displayed next to the field name to indicate it is required. 2. Switch off the toggle to allow a user to progress in the flow even if they have not entered any input into the component, for example if the field is optional.
Type	Select the type of validation to apply to the component. 1. Minimum number: A user must enter more than this value into the field. 2. Maximum number: A user is unable to enter more than this value into the field. 3. Regular expression pattern: Apply Regular Expression (Regex) validation to the component.
Value	Enter the validation criteria. 1. Minimum number: Enter a minimum number or character limit for the component. 2. Maximum number: Enter a maximum number or character limit for the component. 3. Regular expression pattern: Enter a valid Regular Expression (Regex) to validate the component.
Message	Enter a message to show to the user if the validation criteria is not met. For example, if the user has entered a numeric value that exceeds the Maximum number value you have set.

Styles

Apply additional CSS styling to the component.

1. Enter space-delimited CSS classes/selectors into the CSS Classes field.

When you run the flow, these classes are appended to the main component class.

Default player runtime Attributes

You can apply the following attribute when running flows with the default player.

Key	Value	Description
maskPage builder: Mask the input field	string	You can add a mask to an input component using the mask attribute to define the format that the value input by the user must conform to.