Conditional visibility

Introduction

Conditional visibility lets you show or hide sections and elements dynamically, based on values in the form model.

Where it applies

• Sections — hides or shows the entire section and all elements inside it
• Elements — hides or shows a single element (input, output, button, alert, etc.)

Visibility modes

Mode	Behaviour
Always	Always visible (default)
Conditional	Visible when a single field matches a value
Conditional	Visible based on multiple conditions (AND / OR)
Never	Always hidden

Conditional — single condition

1. Create a new Ruleset named Fruit
2. Add the following Input
   1. apple of type Number
   2. banana of type Number
   3. orange of type Number
3. Add a new Form to the Ruleset
4. Create a section with the following elements
   1. Input > Number — Label: Apple, Path: apple
   2. Input > Number — Label: Banana, Path: banana
   3. Input > Number — Label: Orange, Path: orange
5. Set Visibility to Conditional for input Orange
   1. Path: apple, Value: 2
6. Save the Ruleset

Previewing the Form

1. Click the Preview button in the top right corner

Now you only see the fields Apple and Banana.

When you type the value 2 in the Apple field, the Orange field appears.

Conditional advanced — multiple conditions

1. Add a second condition
   1. Path: banana, Value: 1, Logical mode: And
2. Save the Ruleset

Previewing the Form

1. Click the Preview button in the top right corner

If you now enter 2 in the Apple field, the Orange field will not become visible.

Only when you also enter a 1 in Banana will the Orange field become visible.

Change Logical mode to Or and view the result in the Preview.

Never

Permanently hides the element. Still part of the form model — its value can still be read/written by rulesets.

Section vs. element

When several fields need to appear/disappear together, apply conditional visibility to the section, not to each element individually.

Tips

• Combine with On change actions for reactive forms
• Never use CSS to hide elements — use the Visibility property instead