Conditionals
Control flow that selects a value based on a condition.
Conditionals resolve a prop value by evaluating a condition and choosing a branch.
If/Then/Else
Binary conditional based on schema validation:
{
"$if": [{ "$data": "/type" }, { "const": "business" }],
"$then": "Business",
"$else": "Personal"
}Required
$if(array of exactly 2 elements):- Value (expression): The value to test.
- Condition (JSON Schema): The condition the value must match.
$then: Value to use if the condition matches. Any value the prop accepts, including nested conditionals and maps.
Optional
$else: Value to use if the condition does not match. Any value the prop accepts, including nested conditionals and maps.
Examples
Conditional prop value:
{
"type": "button",
"props": {
"label": {
"$if": [{ "$data": "/type" }, { "const": "business" }],
"$then": "Business",
"$else": "Personal"
}
}
}Conditional nested elements:
{
"type": "section",
"props": {
"children": {
"$if": [{ "$data": "/type" }, { "const": "business" }],
"$then": [
{ "type": "text", "props": { "children": "Company Name" } },
{ "type": "text", "props": { "children": "Tax ID" } }
],
"$else": [{ "type": "text", "props": { "children": "Full Name" } }]
}
}
}Switch/Case/Default
Multi-case conditional:
{
"$switch": { "$data": "/frequency" },
"$case": {
"daily": "You will receive daily digest emails",
"weekly": "You will receive weekly digest emails"
},
"$default": "You will receive monthly digest emails"
}Required
$switch(expression): The value to discriminate on.$case(object): Maps case values to any value the prop accepts, including nested conditionals and maps.
Optional
$default: Value to use if no case matches. Any value the prop accepts, including nested conditionals and maps.
Behavior
The subject expression is resolved and compared against the case keys by
its string representation (e.g. the number 2 matches the key "2"); the
matching case's value is used, or $default when no key matches.
Example
{
"type": "text",
"props": {
"children": {
"$switch": { "$data": "/theme" },
"$case": {
"light": "Light mode active",
"dark": "Dark mode active"
}
}
}
}