Toggle component
Add a toggle switch input to a page.
Overview
Add a toggle component to a page to capture user input in a flow using a toggle switch input type. Toggle components are larger than checkboxes and designed for ease of use on mobile devices in particular.
For example, add a toggle component if you want your users to indicate whether to enable or disable something.
-
A user can set the toggle switch to either an 'enabled' or 'disabled' state.
-
Toggle component data is usually stored in values of the 'boolean' content kind. See Value content kinds.
-
If the toggle is enabled, the boolean value can be set to 'True', and if the toggle is disabled, the boolean value can be set to 'False'.
-
The toggle component is based on a checkbox component, using custom styling and code to render as a toggle switch. The shape and color of the toggle switch can be configured using attributes. See Attributes reference.
General settings
Configure the general settings for the component.
| Setting | Description |
|---|---|
| Name | Enter a name for the toggle component. |
| Label | Enter a label for the toggle component. The Label is displayed above the toggle switch. |
| Editable | Specify if the component can accept user input. For example, if a user can change the state of the toggle switch. - Select the checkbox to allow the component to accept input from a user. - De-select the checkbox to prevent a user from being able to input or interact with the component. |
| 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
Select the value that you wish to save the user selection data into.
- Save the component state into: Click Select or create a new value to select an existing value or create a new value.
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.
- Click Add Validation.
- Select the validation Type.
- Enter a valid Value for the validation type.
- Enter a feedback Message to show to the user if the validation criteria is not met.
- 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, whether a user must select the toggle before they can progress in the flow. 1. Switch on the toggle to set the component as requiring a user to make a selection 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 made a selection from 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. |
Data presentation
-
Click Add Column to choose the properties that you wish to display.
For example, if you have multiple properties assigned to the type, you must choose which properties to show in the drop-down menu.
Attributes
Add attributes to the component.
- Click Add Attribute.
- Enter a supported attribute Key and Value.
Styles
Apply additional CSS styling to the component.
- 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.
