# 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](/ui-building-blocks/widgets/default-properties.md).

### 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**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/layout-structure-widgets/conditional-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.