> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Conditional styling

> Dynamically update styling and properties of UI elements based on conditions, reducing the need for multiple prototypes.

Conditional styling enables dynamic, data-driven design adjustments based on specific conditions. It helps reduce the need for multiple prototypes by applying styles conditionally, depending on the data and platform-specific configurations.

> [!NOTE]
>
> **Conflict Resolution:** When multiple conditions overlap, the latest condition (evaluated from top-to-bottom) takes priority.

***

## Configuring conditional styling

1. Open the **UI Designer**.
2. Select an element that supports conditional styling (see [Availability](#availability)).
3. Navigate to the **Styles** tab.
4. Locate the **Conditional Styling** section.
5. Click the **➕** icon to add new expressions and effects.
6. Use the **JS Editor** to configure and test your expressions for accurate behavior.

***

## Conditional styling properties

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/4.6/image%20%2812%29.png)

### Availability

Conditional styling is available on these components:

| Component |
| - |
| Text |
| Link |
| Container |
| Card |
| Form |
| Collection |
| Collection prototype |

**Image** also supports conditional styling.

### Properties you can override

The properties available depend on the component. Across the supported set these are:

| Property | Key used in `overrides` |
| - | - |
| **Background Color** | `backgroundColor` |
| **Border Color** | `borderColor` |
| **Border Width** | `borderWidth` |
| **Text Color** | `labelColor` |
| **Text Style** | `labelStyle` |
| **Link Color** | `linkColor` |

> [!WARNING]
>
> Use the keys in the right-hand column. A key that is not in this list is stored but never applied, so the style silently has no effect.

***

## Structure of conditional styling

1. **Condition:**
   * A string expression, evaluated like the [hide and disabled conditions](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md#hide-and-disabled-conditions).
   * Supports referencing process data store keys for dynamic evaluations.

2. **Overrides:**
   * A key-value map defining specific property-value pairs.
   * Overrides are applied based on the evaluated condition.

### Example:

```json theme={"dark"}
{
  "platformDisplayOptions": {
    "platform": "web",
    "style": {
      "conditionals": [
        {
          "condition": "$user.age > 30",
          "overrides": {
            "backgroundColor": "#FFD700",
            "labelStyle": "bold"
          }
        },
        {
          "condition": "$user.subscription == 'premium'",
          "overrides": {
            "borderColor": "#4CAF50",
            "labelColor": "#FFFFFF"
          }
        }
      ]
    }
  }
}
```

## Renderer behavior

* **Real-Time Evaluation**: Conditions are continuously evaluated based on live data updates.
* **Priority Handling**: If multiple conditions are met, the last condition in the sequence takes precedence.
* **Dynamic Application**: Styles are applied instantly upon condition satisfaction, enhancing UI responsiveness.

## Contextual menu options

* Conditional Styling Section: Copy To/From Platforms to reuse conditions across different environments.
* Expression + Effect Section: Copy To/From Platforms and Delete options for efficient management.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/4.6/contextual_menu.png)

## Key notes

* **Dynamic Styling**: Facilitates platform-specific style overrides driven by real-time data conditions.
* **Scalability**: Designed to support iterative and scalable UI implementations.
* **Enhanced Usability**: Simplifies user interaction with intuitive UI/UX components, making style management more accessible and efficient.

> [!TIP]
>
> Combine conditional styling with data-driven expressions to create responsive, adaptable UI designs.


## Related topics

- [UI Designer](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
- [UI Designer best practices](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/best-practices.md)
- [Screen configuration guide](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/screen-configuration-guide.md)
- [FlowX.AI 4.6.0 Release Notes](https://docs.flowx.ai/release-notes/v4.x/v4.6.x/v4.6.0-january-2025/v4.6.0-january-2025.md)
- [Table](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/table.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.