Switch
The Switch component allows users to choose between two mutually exclusive options.
Example
You can use the Switch component to customise further the user experience allowing them to enable certain app features. In this app:
- Users can choose whether to see the dinner menu options or not.
Note: The Switch component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following Switch 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 text you want to display next to the component. | Yes |
Default value | Enter a Boolean value (true/false) to turn on/off the component by default. You can use templating or write a string, for example, the string "true" will turn on the component. | No |
Note: See Templating drop-down for more details on rendering dynamic content using Liquid.
Styles
Property | Description | Required |
---|---|---|
Size | Select the size from the drop-down menu. | No |
Label position | Select the Label position from the drop-down menu. | No |
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 |
Note: See Add rules to trigger properties for more information on setting rules for these properties.
Accessibility
Property | Description | Required |
---|---|---|
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 Switch component supports the On update event. See Events and actions for more details.