Skip to content

Conditional Visibility

Vorm supports dynamic field visibility using the showIf property. You can use this to conditionally display fields based on values elsewhere in the form.

Basic Usage

Use showIf as a function that receives the entire form:

ts
{
  name: "adminCode",
  type: "text",
  showIf: (form) => form.role === "Admin"
}

This approach works well when the dependent value is on the same level.

Relative Paths

For nested structures (like repeaters), you can use a relative path and a condition function:

ts
{
  name: "modLevel",
  type: "number",
  showIf: {
    dependsOn: "../../role",
    condition: (value) => value === "Moderator"
  }
}

The path will be resolved relative to the current field. You can go up (..) to access parent values.

Notes

  • showIf only controls visibility — not validation or required state.
  • You can combine showIf with repeater and deeply nested structures.
  • Absolute paths are not supported; relative resolution is preferred.

Conditional visibility is fully integrated into Vorm. It works in repeaters, nested sections, and with all dynamic rendering logic — no extra setup needed.

MIT Licensed