;
};
Flip a switch and the UI changes. `If` and `Else` render different components based on reactive state, with no server round-trip.
```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
Alert, AlertDescription, AlertTitle,
Card, CardContent, CardHeader, CardTitle,
Column, Switch, Text,
)
from prefab_ui.components.control_flow import Else, If
from prefab_ui.rx import Rx
dark_mode = Rx("dark_mode")
notifications = Rx("notifications")
with Card(css_class="w-full"):
with CardHeader():
CardTitle("Preferences")
with CardContent():
with Column(gap=4):
Switch(label="Dark Mode", name="dark_mode", value=False)
Switch(label="Notifications", name="notifications", value=True)
with If(dark_mode):
with Alert(variant="info"):
AlertTitle("Dark Mode")
AlertDescription("Your eyes will thank you.")
with Else():
with Alert(variant="warning"):
AlertTitle("Light Mode")
AlertDescription("Living dangerously, I see.")
with If(notifications):
Text(
"You'll receive alerts for all events.",
css_class="text-sm text-muted-foreground",
)
with Else():
Text(
"Notifications are off. You're on your own.",
css_class="text-sm text-muted-foreground",
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "w-full",
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [{"type": "CardTitle", "content": "Preferences"}]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"name": "dark_mode",
"value": false,
"type": "Switch",
"label": "Dark Mode",
"size": "default",
"disabled": false,
"required": false
},
{
"name": "notifications",
"value": true,
"type": "Switch",
"label": "Notifications",
"size": "default",
"disabled": false,
"required": false
},
{
"type": "Condition",
"cases": [
{
"when": "{{ dark_mode }}",
"children": [
{
"type": "Alert",
"variant": "info",
"children": [
{"type": "AlertTitle", "content": "Dark Mode"},
{"type": "AlertDescription", "content": "Your eyes will thank you."}
]
}
]
}
],
"else": [
{
"type": "Alert",
"variant": "warning",
"children": [
{"type": "AlertTitle", "content": "Light Mode"},
{"type": "AlertDescription", "content": "Living dangerously, I see."}
]
}
]
},
{
"type": "Condition",
"cases": [
{
"when": "{{ notifications }}",
"children": [
{
"cssClass": "text-sm text-muted-foreground",
"content": "You'll receive alerts for all events.",
"type": "Text"
}
]
}
],
"else": [
{
"cssClass": "text-sm text-muted-foreground",
"content": "Notifications are off. You're on your own.",
"type": "Text"
}
]
}
]
}
]
}
]
},
"state": {"dark_mode": false, "notifications": true}
}
```
## How It Works
Two boolean [state](/concepts/state) keys drive everything: `dark_mode` (starting `False`) and `notifications` (starting `True`). Each `Switch` binds to one of them through its `name`, so flipping a switch writes `True` or `False` back to state and re-renders anything that reads it.
`dark_mode = Rx("dark_mode")` and `notifications = Rx("notifications")` create reactive references to those keys. Passing one to [`If`](/components/conditional) registers a condition that the renderer re-evaluates whenever state changes. `with If(dark_mode):` renders its children only while `dark_mode` is truthy; the paired `with Else():` renders the alternative the rest of the time. The two branches are mutually exclusive — exactly one alert is mounted at any moment, swapping the moment the switch moves.
The pattern composes. The second `If`/`Else` pair reads `notifications` independently and toggles between two status lines, so the card holds two unrelated conditional regions side by side. Each `If`/`Else` only needs the reactive reference for its condition — there is no manual subscription or re-render logic, because [conditional rendering](/concepts/expressions) reacts to the same client-side state the switches write to. Flipping either switch updates only the branch that depends on it.