Skip to main content

Visibility (visible)

Use visible to dynamically show or hide fields, sections, groups, or even modals based on the current state of the form.

This is useful to guide the user step-by-step, reduce clutter, or display conditional content.

Static visibility​

You can hardcode visibility using a boolean:

{
  "field_never_shown": {
    "component": "text",
    "label": "Hidden field",
    "visible": false
  }
}

The field is always hidden and skipped during rendering.

Conditional visibility​

Most of the time, you want the visibility to depend on other fields.

{
  "company_name": {
    "component": "text",
    "label": "Company Name",
    "visible": [
      {
        "property": "is_company",
        "assertion": "isTrue"
      }
    ]
  }
}

The field will only be shown if the value of is_company is true.

You can combine multiple conditions in the array (default operator is and).

Controlling visibility of containers​

Visibility can be applied to almost every form parts:

  • component fields (Text, Checkbox, etc.)
  • group, section containers
  • modal components
  • premiums_table component
  • text, message, title components

When a container is hidden:

  • All nested children are also hidden
  • Hidden children are excluded from validation and submission

Example on a group:

{
  "advanced_fields_group": {
    "type": "group",
    "visible": [{ "property": "use_advanced", "assertion": "isTrue" }],
    "properties": {
      "advanced_field": {
        "component": "text",
        "label": "Advanced option"
      }
    }
  }
}

Keeping hidden values (keepValueIfHidden)​

By default, when a field becomes hidden because its visibility condition is not met, its value is removed from the data — it becomes null or is deleted entirely.
This prevents hidden fields from polluting the form output.

In some cases, however, you may want to preserve the value of a hidden field (for example, when toggling visibility, or when hiding optional details).

You can do this by setting keepValueIfHidden to true:

{
  "additional_notes": {
    "component": "textarea",
    "label": "Additional notes",
    "visible": [{ "property": "show_details", "assertion": "isTrue" }],
    "keepValueIfHidden": true
  }
}

When keepValueIfHidden is true, the field’s value will remain in the data even when hidden.
This is useful for cases such as:

  • preserving temporary input between steps,
  • conditionally hiding UI without losing user input,
  • saving or restoring drafts of the form.
PropertyDefaultDescription
keepValueIfHiddenfalseKeeps the field’s value even when it becomes hidden.

You can also apply keepValueIfHidden to containers (group, section) to preserve all nested values when a container is hidden.

Notes​

  • Hidden fields are not validated
  • Hidden fields are excluded from submission, unless keepValueIfHidden is true
  • Visibility is re-evaluated automatically whenever form data changes
  • Use readOnly or disabled instead if you want the field to stay visible but uneditable

See also:

  • Conditions to learn how condition objects work
  • Default values to control what’s pre-filled even before visibility is applied