Checkbox

The Checkbox element allows you to add options for customers to choose several among them.

Element Tab

The primary configuration options for the element can be modified in the Element tab. The Checkbox element contains the following attributes in the Element tab:

• Element Name - in this section you can set a name to the field that will be visible to users in front end to the checkbox field. It has two fields:

  • Name - Title of the element.

  • Description - Description of the element.

  • Hint - adds a small icon next to option to get more info about the option.

• Element Width (%) - Defines how much horizontal space the element occupies in the form layout.

• Element Columns - Select into how many parts the width of the element should be divided to display the options. This helps organize checkbox 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 raws.

• 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.

• Add Option - Adds a new option to the list.

• Default Value(s) - Select which option will be preselected when the form loads.

• Type of Label in Total - Choose how to display the selected option of the field in the Summary.

  • Show Value - displays the numeric value of the option in the Summary.

  • Label Only(No calculation) - Displays the label of the options, and the value of the selected option will not be included in Formula Calculations. It is useful when the field is used to create conditions.

  • Label Only(Calculation Value) - Displays the label of the options, and the value of the selected option will be included in Formula Calculations.

3 Columns

4 Columns

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 Checkbox element has the following attributes in the Variants tab:

Here are the available variants for the checkbox field:

Default

Box

Box with Checkbox

Box with Checkbox and Description

Box with heading checkbox and description

The tab has one more setting at the bottom:

• Apply this checkbox style to all checkbox fields in this calculator - When the option is enabled selected style will be applied to all Checkbox elements in the calculator which is being edited.

Settings Tab

The Checkbox element contains the following attributes in the Styles tab:

• Currency Sign - Enable if you want to set another currency sign.

• Round Value - Enable if you want not to round the value to the whole number.

• Required - Defines whether the element will be required to fill or not.

• 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.

• Min and Max Number of Options to Select - Ability to set the maximum and minimum number of available options to choose from.

• Additional Classes - Add extra classes to the HTML elements to further style changes.

Add a measuring 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 the symbol to separate thousands

• Number of decimals - indicate the number of decimals in the fractional part

• Decimal separator - select the symbol to separate fractional part

Example of Using Checkbox Element

Let’s see an example of the Checkbox element in the Cleaning Company Template.

How it looks on the user’s page: