---
title: "if · RUAL Documentation"
description: "Allows you to use different state UIs based on your given condition."
canonical: https://docs.rual.nl/block-types/state%20ui/state_branch
language: en
---

[Cluster](https://docs.rual.nl/cluster)

[Blocks](https://docs.rual.nl/block-types)

[Interfaces](https://docs.rual.nl/interfaces)

[Blueprints](https://docs.rual.nl/blueprints)

[Tutorials](https://docs.rual.nl/tutorials)

[Home automation](https://docs.rual.nl/home-automation)

[Examples](https://docs.rual.nl/examples)

[Reference](https://docs.rual.nl/reference)

[Architecture](https://docs.rual.nl/architecture)

[Troubleshooting](https://docs.rual.nl/troubleshooting)

Other

# if

This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v10.4.28`](https://docs.rual.nl/core-versions/100428).

Allows you to use different state UIs based on your given condition.

- on true required `state` UI shown when condition is `true`

- on false required `state` UI shown when condition is `false`

- boolean required `condition`

- UI `state` Returns the element to the frontend state.

| `branch` |
| --- |
| `condition` |

A typical wiring for [if](https://docs.rual.nl/block-types/state%2520ui/state_branch): [div](https://docs.rual.nl/block-types/state%2520ui/state_div) feeds the `then` pin; [translate key](https://docs.rual.nl/block-types/translations/state_translate_key) feeds the `else` pin; [is not empty](https://docs.rual.nl/block-types/condition/condition_not_empty_value) feeds the `condition` pin; the `state` out pin feeds [div](https://docs.rual.nl/block-types/state%2520ui/state_div).

[![Studio canvas example for the if block: typical wiring for if.](https://docs.rual.nl/canvas-examples/state_branch.png)](https://docs.rual.nl/canvas-examples/state_branch.png?v=3)

## Commonly used with

In production blueprints, this block is most often wired together with:

- [div](https://docs.rual.nl/block-types/state%20ui/state_div): wired in both directions with this block. Creates a dynamic and customizable div element on your web page.

- [translate key](https://docs.rual.nl/block-types/translations/state_translate_key): feeds into this block. Translates a given key and builds DOM nodes from the HTML within these keys.

- [is not empty](https://docs.rual.nl/block-types/condition/condition_not_empty_value): feeds into this block. checks if the value is filled (not empty).

- [send email with template](https://docs.rual.nl/block-types/postmark/postmarkconnection_send_email_template): feeds into this block. sends a single email with a template.

- [get key](https://docs.rual.nl/block-types/state%20ui/state_get_custom_field): feeds into this block. Get given key from the current UI state.

## Version history

Introduced in [`v10.4.28`](https://docs.rual.nl/core-versions/100428).

- [Back to `state ui`](https://docs.rual.nl/block-types/state%20ui): Return to the main group to view all sub-groups

- [Back to `state conditions`](https://docs.rual.nl/block-types/state%20ui?group=state%20conditions): Return to the group to view all blocks within this group

Was this page helpful? [Tell us what to improve](https://docs.rual.nl/support) · RUAL Docs is an integral component of the [RUAL ecosystem](https://rual.nl)