Switch Toggle
The Switch Toggle element allows you to put a single-value radio button to turn on/off.
Element Tab
In the Element tab, the fundamental settings of the element can be configured. The Switch Toggle element has the following attributes in the Element tab:
Element Name - title of the field.
Description - brief description of the field.
Element width - set how much horizontal space the element occupies in the form relative to the width of the calculator in 100% scale. You will see the changes in real time.
Element Columns - Select how many parts the width of the element should be divided to display the options. This helps organize radio options into multiple columns. It is especially useful when there are many options, making them easier for users to view and select. If 3 is selected, all the options will be displayed in three rows.
Options - under this section, you can add/remove/reorder options of the radio and assign numerical values to them.
Option Label - Add options for users to choose from.
Option Value - Add numeric values that will be used in total calculations when an option is selected.
Hint - a small description of the option can be viewed by hovering the icon next to it.
Add Option - Adds a new option to the list.
Default Value - Select the option that is preselected when the form loads.
Type of Label in Total - Choose how the selected option will appear in the Summary (Total) section.
Show Value - Displays the values of the Radio options.
Label Only(No calculation) - Displays the label of the Radio options, and the value will not be included in Total Calculations. It is useful when the field is used to create conditions.
Label Only(Calculation Value) - Displays the label of the Radio options, and the value will be included in the total calculations.
Also, here is an example of an applied Element Column Setting:
Set Measurement Unit
This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.
Unit Symbol - enter the unit symbol
Position - select the position where the symbol should be displayed relative to the number
Thousands separator - select the symbol to separate thousands
Number of decimals - indicate the number of decimals in the fractional part
Decimal separator - select the symbol to separate the fractional part
Variants Tab
The Variants tab is available in the Pro version of the plugin, and there you can adjust the appearance of the field. The Switch Toggle contains the following attributes in the Variants tab:
There are two available variants for Switch Toggle:
The tab has one more setting at the bottom:
Apply this toggle style to all toggle fields in this calculator - When the option is enabled, the selected style will be applied to all toggle elements in the calculator that is being edited.
Settings Tab
The Switch Toggle element has the following attributes in the Settings tab:
Required - Defines whether the element will be required to fill or not.
Round Value - Enable if you do not want to round the value to the whole number in the total summary.
Hidden by Default - The element will be hidden until a corresponding condition is met. If the element is hidden, its default value will be counted as '0' in the formula
Calculate hidden by default - If any case hides the element via the Hidden by Default setting or hidden by some condition, the element's default value (if it is set) will be counted in the formula.
Show in Grand Total - Disable if you want to hide the element in Grand Total.
Number of options to select - Ability to set the maximum number of available options to choose from.
Additional Classes - Add extra classes to the HTML elements to further style changes.
Example of Using Switch Toggle
Let’s see an example of the Switch Toggle in the School residential payment template. It will be used for users whether they want to have insurance or not.
That’s how it will look on the user’s page:
Last updated
Was this helpful?