A toggle switch is a digital on/off switch. Toggle switches are best used for changing the state of system functionalities and preferences. Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states.
Alternatively, you can change the toggle switch to a tick box
, which is a small square on a form where you can put a check mark to show that you want something or that something is correct or has been dealt with.
Add Switch control to the form
Firstly, find the Switch control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Switch
Open the Content > Basic block and set the Title's text of this Multiple Metadata control. For more information about Title for field control, please refer:
Set the Associated variable for this Switch control. When you add a new Switch control, a default variable will be generated automatically. You can click the Edit Button to change the ID and name, or click the Reset button to bind this Switch control to other existing variables. For more information, please refer:
Appearance of the Switch field
Open the Content > Appearance block to set the appearance and layout of this Switch control.
Display Style: Set control as ON/OFF switch or Tick box.
Placeholder: Set the text after Switch or Tick box control.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the title of field controls
Allow comment: Turn on this option will allow users to add comments on this control.
Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Validation of the Switch control
Open the Content > Validation block to set the properties of this Switch control.
Readonly: Turn this ON will make this field control as Disabled status.
Default Value: Set a default status of this Switch control (Normal/Active).
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field. Learn more about the Custom Validation.
Action call of the Switch control
Open the Content > Action
block to call a pre-defined action from the dropdown list. This action will be triggered once the value of this Switch field is changed.
Style the Switch control
Field
Open the Style > Field block to set the styles of the field control.
Gap between control and suffix: Set the spacing between the ON/OFF switch or Tick box, and the text of suffix.
Control size: Set the size of the ON/OFF switch or Tick box control. The size (in px) set here is the height of this control, while the width will be changed according.
Field Alignment: Set the alignment of this switch control as left, center or right.
Normal / Active / Disabled:Set different styles for normal, active and disabled state of the switch control. Styles below are supported to be set separately for normal, active and disabled state.
Color: Choose the front color of the ON/OFF switch or Tick box.
Background Color: Set background color of the ON/OFF switch or Tick box.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Suffix: Set the style of the suffix text:
Typography: Set the typography options for the text of the suffix.
Color: Choose the text color of the suffix.
Background Color: Set background color of the suffix.
Style of title
Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.