Skip to main content
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. 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.

​
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. 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 always a raw expression, not a {{ }} template. Templates embed expressions inside larger strings (Text("Hello, {{ name }}!")), but a condition is the expression — there’s nothing to embed it in. 
# ✅ Correct — raw expression
with If("status == 'active'"):
    ...

# ❌ Wrong — unnecessary template delimiters
with If("{{ status == 'active' }}"):
    ...

​
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
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 for the full schema.

​
API Reference

If

​
condition
str
required
Expression to evaluate. Renders children when truthy. Can be passed as a positional argument.

Elif

​
condition
str
required
Expression to evaluate. Must follow an If or another Elif. Can be passed as a positional argument.

Else

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.