Skip to main content

Checkbox

What is the Form Checkbox?​

The checkbox form type allows users to select multiple items from a list. The settings enable defining available items and applying general formatting options.

checkbox.png

Options​

Values​

  • Specifies the selections that will be rendered.
  • Selections are separated by new lines, with each new line representing a new entry.
  • Entries can be tagged as ‘selected’, ‘correct’, or both. Tags are removed from the rendered label.

Tagging System:​

  • [!] - Correct entry
  • [*] - Selected entry
  • [!*] or [*!] - Selected and correct entry

Example Entries:​

  • [*]Large → Rendered as Large (selected by default)
  • [!*]Small → Rendered as Small (selected and correct)

Button Style​

Defines the appearance of checkboxes:

None​

No box appears; only the label functions as the checkbox.

checkbox-button-style-none.png

Rectangular​

Displays rectangular-styled checkboxes.

checkbox-button-style-rectangular.png

Rounded​

Displays rounded-styled checkboxes.

checkbox-button-style-rounded.png

Color​

No label appears; the label acts as a color code, filling the checkbox with the specified color.

checkbox-button-style-color.png checkbox-button-style-color-setting.png

Width Mode​

Defines how checkboxes are sized:

  • Default: Uses minimal required space.
  • Auto: All boxes have equal width.
  • Fixed: Each box takes up at least the specified space.

Additional Appearance Settings​

  • Primary Color: Sets the main color of the checkboxes.
  • Unselected Background Color: Defines the background color for unselected checkboxes.
  • Unselected Font Color: Sets the font color for unselected checkboxes.
  • Background Rounding: Adjusts the rounding of checkbox backgrounds.
  • Direction: Specifies the flex direction (Column, Row, Column-Reverse, Row-Reverse).

Setting Mock Field and Own Value​

The checkbox updates its own value and the mock field when:

  • The checkbox renders (pre-selected values are assigned to the mock field).
  • A selection is made.
  • An external message updates values or selections.

Validation​

If validation is enabled:

  • The form checks if only the correct options are selected.
  • If a wrong option is selected, the checkbox is marked invalid.
  • If "Show Validation" is enabled, the field displays a validation border.

Sensor Events​

Checkboxes emit an external message when validation occurs:

{FORM-NAME}-valid: [true/false]
  • {FORM-NAME} is the checkbox’s assigned name.
  • The value (true or false) indicates the validation result.

Example:​

example-checkbox-valid: true

External Messages​

Checkboxes respond to three external messages:

  • Set Form: Updates selections based on received values (matching the Values format). If no valid option is found, the message is ignored.
  • Clear Form: Removes all selections and clears the mock field.
  • Reset Form: Restores the checkbox to its initial state (validation status remains unchanged).

Value from Datasource​

If an external datasource array is linked to the checkbox, it:

  • Converts array elements into selectable options.
  • Adds them after predefined Values options.
Last updated on