Dynamic Properties

Any property — style, prop, visibility, click action, or custom CSS — can have multiple conditional values. Dynamic Properties let you define an if/else-if/else chain for any property on any component.

How It Works

A dynamic property is an ordered list of values, each optionally gated by a condition:


┌─ if answers.goal == "profit"      → color: #22c55e
├─ if answers.goal == "learning"    → color: #3b82f6
└─ (no condition)                   → color: #6b7280    ← fallback

Values are evaluated top to bottom. The first value whose condition matches is applied. A value with no condition always matches — use it as the fallback (else) at the end of the list.

If no value matches and there is no fallback, the dynamic property has no effect and the static property value is used.

Setting Up Dynamic Properties

Select a component and open the property panel.
Click the dynamic icon next to any property to open the dynamic property editor.
Add values with conditions. Each condition uses the same format as routing conditions: variable + operator + value, with AND/OR groups.
Reorder values by dragging — order matters because first match wins.
Leave one value without a condition as the fallback.

Dynamic Property Editor Insert image: The dynamic property editor panel for a “color” property, showing two conditional values with variable conditions and a fallback value at the bottom

Condition Operators

Conditions use the same operators as variable conditions — equals, notEquals, contains, greaterThan, lessThan, exists, includes, and more. Conditions can be combined into groups with AND/OR logic. See the Condition Operator Reference for the full list.

Conditions also support Liquid expressions as the evaluated value for computed comparisons.

What Can Be Dynamic

Every property category supports dynamic values:

Category	Examples
Style	`color`, `background`, `fontSize`, `width`, `opacity`, `borderColor`, `display`, and all other CSS properties.
Props	`text`, `src`, `placeholder`, `optionValue`, and any element-specific prop.
Visibility	`hidden` — conditionally show or hide a component.
Click Actions	`clickActions` — different action chains based on conditions.
Animation	`animationBehavior` — conditional tap feedback.
Custom CSS	`customCSS` — swap entire CSS blocks based on conditions.

Common Use Cases

Conditional Visibility

The most common pattern. Show or hide a component based on a variable:


Property: hidden
┌─ if data.showDiscount == true    → false (visible)
└─ (no condition)                  → true (hidden)

This shows a discount badge only when data.showDiscount is true. Pair with a Set Variable click action or a timer to toggle the variable.

Dynamic Text

Show different text based on user answers:


Property: text
┌─ if answers.experience == "advanced"   → "Welcome back, pro!"
├─ if answers.experience == "beginner"   → "Let's get you started"
└─ (no condition)                        → "Welcome!"

For simple text personalization, Liquid templates inside a regular text prop are often simpler than dynamic properties. Use dynamic properties when you need entirely different text content per condition, not just variable interpolation.

Dynamic Colors

Change a button’s appearance based on state:


Property: background
┌─ if payment.loading == true     → #9ca3af
└─ (no condition)                 → #22c55e


Property: text
┌─ if payment.loading == true     → "Processing..."
└─ (no condition)                 → "Pay Now"

Dynamic Click Actions

Route users differently based on their answers:


Property: clickActions
┌─ if answers.hasAccount == true   → [goToNextPage (to: login)]
└─ (no condition)                  → [goToNextPage (to: signup)]

Conditional Page Type Styling

Style a component differently based on the page’s purpose:


Property: background
┌─ if purchase.success == true    → #dcfce7
└─ (no condition)                 → #ffffff

Dynamic Properties vs. Active Style

Both systems modify a component’s appearance based on conditions, but they serve different purposes:

	Active Style	Dynamic Properties
States	Binary (active / inactive)	Unlimited conditional values
Inheritance	Cascades to all children	Per-component, per-property
Setup	Toggle between Default/Active in property panel	Dynamic editor per property
Best for	Option selection, coordinated group state	Complex per-property conditional logic
Conditions	One condition per stack (or automatic via options)	One condition per value per property

Merge Priority

Dynamic Properties always take precedence over Active Style, which takes precedence over static values. See Active Style — Merge Priority for the full priority chain.

If a dynamic property has conditions but none match and there is no fallback value, the dynamic property is skipped. In that case, the active style or static value is used. Always add a fallback value unless you intentionally want this behavior.