# Conditional Builder

The Conditional Builder widget is a powerful tool for displaying different widgets based on a set of conditions. It evaluates a series of `ConditionalItem` children and displays the first one whose condition evaluates to `true`. This is useful for creating dynamic UIs that change based on application state, user input, or other factors.

{% embed url="<https://youtu.be/87ojech5Pyc?si=6C-WjhoTZ2HlfKUn>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=87ojech5Pyc>

### Core Concepts

* **First Match Logic**\
  Conditions are checked in order. The **first `true` condition wins**, and its widget is shown.
* **Shared Data (Data Ref)**\
  A **Data Ref** is provided at the builder level and can be used by all ConditionalItems in their conditions.
* **Active View**\
  You can manually set **Active View** to a specific index to **force** showing a particular ConditionalItem (useful for debugging or previews).

### **Data Source**

The Conditional Builder widget has a `Data Ref` property that can be used by the `ConditionalItem` children. You can input either static data or dynamic data using expressions.

### **Properties**

| Property      | Description                                                                                             |
| ------------- | ------------------------------------------------------------------------------------------------------- |
| `Data Ref`    | A list of data that can be used by the `ConditionalItem` children.                                      |
| `Active View` | The index of the `ConditionalItem` to display. This is useful for debugging or forcing a specific view. |

### Children of Conditional Builder

| Children   | Description                                                                                                               |
| ---------- | ------------------------------------------------------------------------------------------------------------------------- |
| `children` | A list of `ConditionalItem` widgets. The first `ConditionalItem` whose `condition` evaluates to `true` will be displayed. |

### Default Properties

The Conditional Builder widget supports all [default-properties](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

### Use Cases

Use **Conditional Builder** when you want to:

* Switch between **loading / error / data** UIs
* Show different layouts for **logged-in vs guest** users
* Change UI based on **selected plan, mode, or step**
* Display different views based on **app state or API response**