Checkbox

The Checkbox component allows users to select a single boolean value (yes/no, true/false).

See Checkbox description on Form.io

See general description of the Checkbox component

Component Visibility: customConditional and Logic

Checkbox supports two independent visibility control mechanisms:

  • customConditional — a JavaScript expression on the Conditional tab that is evaluated on every form data change. The result (true / false) determines whether the component should be displayed.

  • Logic — rules on the Logic tab that can programmatically set the component.hidden property.

Both mechanisms work independently and are applied together:

  • the component is hidden if customConditional returned false or Logic set hidden = true.

  • if neither condition is set, the component is displayed.

customConditional Example

Hide the Checkbox until the status field equals "active":

show = data.status === 'active';

Combined Usage Example

The form has a Checkbox with:

  • customConditional: show = data.role === 'manager';

  • Logic: on the change event of the department field, sets component.hidden = true.

In this case, the Checkbox is displayed only if both conditions allow display: the component is hidden when data.role !== 'manager' or when Logic set hidden = true.

Note

Prior to the version that includes the fix for task #96, customConditional was ignored when Logic rules were present. Make sure you are using an up-to-date version of ecos-ui if forms with both mechanisms were working incorrectly.

Implementation Details (for Developers)

Checkbox in Citeck overrides the updateVisible method of the formiojs base class. This is necessary for correct operation inside the Columns container with autoAdjust enabled (the element is hidden via visibility: hidden instead of the hidden attribute, so the column cell does not collapse).

Visibility is computed as:

const shouldBeHidden = !!component.hidden || _visible === false;

where:

  • component.hidden — set by Logic rules (Pipeline 2 in formiojs).

  • _visible — set by customConditional / standard conditional logic (Pipeline 1 in formiojs).

The strict === false check for _visible is important: it prevents the component from being falsely hidden while formiojs has not yet initialized this field (a value of undefined is treated as “visible”).

updateVisible Logic

component.hidden

_visible

Result

Note

false

true

Displayed

Normal state

false

false

Hidden

customConditional prevented display

true

true

Hidden

Logic hid the component

true

false

Hidden

Both mechanisms hide

false

undefined

Displayed

formiojs has not yet initialized _visible

When hiding inside Columns with autoAdjust:

// Компонент не удаляется из DOM, только визуально скрывается:
element.style.visibility = 'hidden';
element.style.position = 'relative';

This preserves the column width until adjacent elements are rearranged via autoAdjust.

Testing Visibility Logic

The applyCheckboxVisibility function is exported as a named export from Checkbox.js, allowing it to be tested without rendering the full component:

import { applyCheckboxVisibility } from '.../Checkbox';

const ctx = {
  options: { builder: false },
  component: { hidden: false, logic: [{ ... }] },
  _visible: false,
  element: document.createElement('div')
};
applyCheckboxVisibility(ctx);
// ctx.element.hidden === true

This is the same pattern used in overrideTriggerChange (misc.js).

See also