Checkbox component

On this page:

🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions.

1. Component description

The Checkbox component is a UI element that allows the user to select one or several options, marked with a check mark (tick) when activated.

Use the Checkbox component from the list of Latest components.

The Checkbox component supports a large number of options for interaction with the process form, which are distributed across tabs.

Label: The name of the component that appears next to it.
Description: a description of the component that can help users.
Tooltip: The text displayed when hovering the cursor over the component.
Tab Index: An HTML attribute that allows you to control keyboard navigation through the input fields. For details, refer to HTML documentation — for example, here: tabindex.
Hidden: An attribute for fields that are hidden from the users but are still part of the form and are submitted along with the form. Don’t forget to clear the Clear when hidden option; otherwise, any value of this component will be empty.
Disabled: A setting that disables editing.

Default Value: values by default.
Clear value when hidden: allows to configure the clearing of the component value when the component becomes hidden on the page.
Custom default value: allows to set your own, custom default value for the component. This function uses JS insert. More about JS insets.
- JavaScript: set your own value by using javascript
- JSONLogic: set your own value by using JSONLogic.
Calculated value: allows to calculate the value of a component based on other data or conditions. Unlike Custom default value, the value of the field will be calculated every time any changes occur on the form - the user enters data, it is completed by http requests. This function uses JS insert. More about JS inserts.
- JavaScript: adjust your own value with javascript help.
- JSONLogic: adjust your own value with help of JSONLogic.
Allow manual override of calculated value: allows users to manually override the calculated value of the component.

Required: the field is required to be filled in before sending the form.
Custom error message: a special error message displayed when data fails validation.
Custom validation: custom validation, which allows you to create validation checks specific to your needs. This function uses JS insert. More about JS insert.
JSONLogic Validation: custom validation that allows to perform special logic using JSONLogic

Property Name: the name of the field in the data structure that will be sent when the form data is submitted. It is also the name of the field in the data structure with which the form is prefilled. The current value of this field can be checked in the data structure displayed on the Query tab in the form design interface.

Advanced Conditions: Here, you can configure advanced conditions for the component. For example, these conditions determine when a component becomes visible based on other components or their values.

This function uses JS plugins. For details, see Variables in JavaScript insertions.
Simple: Performs the same tasks as Advanced Conditions but allows you to specify conditions in a simpler format.

Table View: determines whether to display the element in the table and in the EditGrid.
Table column width: allows to customize the column width in the table that is displayed when using the component in EditGrid.
Sort As Number: determines whether to sort the value as a string or as a number when using the EditGrid component.

Submission

Boolean
// Example: true

These functions use JS insertions. For more details see Variables in JavaScript insertions.

Set a value equivalent to the Checkbox component with the name checkboxLatest1

value = data.checkboxLatest1