;
};
`If`, `Elif`, and `Else` let you conditionally render different components based on expression results. They mirror Python's own `if/elif/else` syntax and read the same way — no wrappers, no extra indentation.
## Basic Usage
The simplest case: show something only when a condition is true. Toggle the switch to see the alert appear and disappear.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Alert, AlertTitle, Column, Row, Switch, Text
from prefab_ui.components.control_flow import If
from prefab_ui.rx import Rx
outOfStock = Rx("outOfStock")
with Column(gap=3):
with Row(gap=2, align="center"):
Switch(name="outOfStock")
Text("Out of stock")
with If(outOfStock):
with Alert(variant="destructive"):
AlertTitle("This item is unavailable")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{
"name": "outOfStock",
"value": false,
"type": "Switch",
"size": "default",
"disabled": false,
"required": false
},
{"content": "Out of stock", "type": "Text"}
]
},
{
"type": "Condition",
"cases": [
{
"when": "{{ outOfStock }}",
"children": [
{
"type": "Alert",
"variant": "destructive",
"children": [{"type": "AlertTitle", "content": "This item is unavailable"}]
}
]
}
]
}
]
},
"state": {"outOfStock": false}
}
```
A lone `If` renders its children when the condition is truthy, and renders nothing when it's falsy.
## If / Else
Add an `Else` branch to render fallback content when the condition is false. Toggle the switch to see the two branches swap.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
STATE as state,
Badge,
Card,
CardContent,
CardHeader,
CardTitle,
Column,
Row,
Switch,
Text,
)
from prefab_ui.components.control_flow import Else, If
with Column(gap=3):
with Row(gap=2, align="center"):
Switch(name="showDetails")
Text("Show details")
with If(state.showDetails):
with Card():
with CardHeader():
CardTitle("Project Details")
with CardContent():
Text("Heart of Gold — Infinite Improbability Drive")
with Else():
Badge("Details hidden", variant="secondary")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{
"name": "showDetails",
"value": false,
"type": "Switch",
"size": "default",
"disabled": false,
"required": false
},
{"content": "Show details", "type": "Text"}
]
},
{
"type": "Condition",
"cases": [
{
"when": "{{ showDetails }}",
"children": [
{
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Project Details"}]
},
{
"type": "CardContent",
"children": [
{"content": "Heart of Gold \u2014 Infinite Improbability Drive", "type": "Text"}
]
}
]
}
]
}
],
"else": [{"type": "Badge", "label": "Details hidden", "variant": "secondary"}]
}
]
},
"state": {"showDetails": false}
}
```
## If / Elif / Else
Chain multiple conditions with `Elif`. The renderer evaluates them in order and renders the first match. If nothing matches, the `Else` branch renders. Use the select below to change the status and watch the right badge appear.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
STATE as state,
Badge,
Column,
Select,
SelectOption,
)
from prefab_ui.components.control_flow import Elif, Else, If
with Column(gap=3):
with Select(name="status", placeholder="Choose a status..."):
SelectOption("Active", value="active")
SelectOption("Warning", value="warning")
SelectOption("Error", value="error")
SelectOption("Something else", value="other")
with If(state.status == "error"):
Badge("Error — system down", variant="destructive")
with Elif(state.status == "warning"):
Badge("Warning — degraded", variant="warning")
with Elif(state.status == "active"):
Badge("Active — all systems go", variant="success")
with Else():
Badge(f"Unknown status: {state.status}", variant="secondary")
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-3",
"type": "Column",
"children": [
{
"name": "status",
"type": "Select",
"placeholder": "Choose a status...",
"size": "default",
"disabled": false,
"required": false,
"invalid": false,
"children": [
{
"type": "SelectOption",
"value": "active",
"label": "Active",
"selected": false,
"disabled": false
},
{
"type": "SelectOption",
"value": "warning",
"label": "Warning",
"selected": false,
"disabled": false
},
{
"type": "SelectOption",
"value": "error",
"label": "Error",
"selected": false,
"disabled": false
},
{
"type": "SelectOption",
"value": "other",
"label": "Something else",
"selected": false,
"disabled": false
}
]
},
{
"type": "Condition",
"cases": [
{
"when": "{{ status == 'error' }}",
"children": [
{"type": "Badge", "label": "Error \u2014 system down", "variant": "destructive"}
]
},
{
"when": "{{ status == 'warning' }}",
"children": [{"type": "Badge", "label": "Warning \u2014 degraded", "variant": "warning"}]
},
{
"when": "{{ status == 'active' }}",
"children": [
{"type": "Badge", "label": "Active \u2014 all systems go", "variant": "success"}
]
}
],
"else": [
{
"type": "Badge",
"label": "Unknown status: {{ status }}",
"variant": "secondary"
}
]
}
]
}
}
```
Select "Error" or "Something else" to see different branches render. The `Else` catches anything that doesn't match the explicit conditions.
## Conditions Are Expressions
The first argument to `If` and `Elif` is a [reactive expression](/concepts/expressions). With `Rx`, you can use Python operators directly:
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.rx import Rx
status = Rx("status")
count = Rx("count")
items = Rx("items")
with If(status == "active"):
...
with If((count > 0) & items.length()):
...
```
Any expression the language supports — comparisons, boolean logic, [pipes](/concepts/expressions#formatting-with-pipes) — works as a condition.
## Chain Rules
Consecutive `If/Elif/Else` siblings in the same parent form a single conditional chain:
* A chain starts with `If` and extends through consecutive `Elif` and `Else` siblings
* `Elif` and `Else` are optional — a lone `If` is valid
* `Else` must be last in a chain
* Any non-conditional sibling breaks the chain — including another `If`, which starts a new independent chain
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.rx import Rx
status = Rx("status")
showDetails = Rx("showDetails")
showFooter = Rx("showFooter")
with Column():
# Chain 1: If / Elif / Else → one Condition node
with If(status == "error"):
Badge("Error", variant="destructive")
with Elif(status == "warning"):
Badge("Warning", variant="secondary")
with Else():
Badge("OK")
Text("---") # breaks the chain
# Chain 2: standalone If → separate Condition node
with If(showDetails):
Text("Details here...")
# Chain 3: another If starts a new chain (not an Elif!)
with If(showFooter):
Text("Footer content")
```
This produces three independent `Condition` nodes with a `Text` between the first and second.
## Wire Format
In the Python DSL, you write natural `If/Elif/Else` siblings. During serialization, these are grouped into a single `Condition` node on the wire. The `If` and `Elif` components never appear in the JSON directly — they're purely authoring constructs.
Each `Elif` becomes a `case` entry with a `when` expression. The `Else` branch becomes the `else` field. See the [Condition protocol reference](/protocol/condition) for the full schema.
## API Reference
Expression to evaluate. Renders children when truthy. Can be passed as a positional argument.
Expression to evaluate. Must follow an `If` or another `Elif`. Can be passed as a positional argument.
Renders children when no preceding `If` or `Elif` matched. Takes no condition argument.
## Protocol Reference
For the wire format schema, see the [Condition protocol definition](/protocol/condition).