> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/how-to/ui-logic/conditional-render.md).

# Conditional Render

### The Goal

Prepare a basic application showing its *Content* based on *Checkbox Value*.

![The Conditional Render Application](/files/95QB9AlSRkupdmvilKYl)

### The Description

The *Adapptio Components* have the *Render* property, which is *Boolean* and can be triggered by a *ƒx Function*. In our case, we will use the *Checkbox*, returning `true` or `false` *Value*, serving as render condition.

### The Knowledge You Will Get

1. Referencing *Condition Values* in *Functions*.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Container\[`container`]
    * [ ] Checkbox\[`chbContent`]
    * [ ] Box\[`boxContent`]
      * [ ] Text\[`textContent`]
        {% endtab %}
        {% endtabs %}

### 1. Prepare a Basic Layout

The *Layout* must contain a *Checkbox*, which *State* we will check up, and *Box* as a Content.

1. Place in the `MainView` a new **Container**, name its *ID* -> `container`, and set up: *Item Flex* -> `Stretch`; *Padding* -> `X-Wide`; *Spacing* -> `X-Wide`
2. Into `container` put a **Checkbox** with *ID* -> `chbContent` and *Value* -> "`Show content`".
3. Place in a new **Box**, name it `boxContent` and configure as follows:
   1. *Horizontal Alignment* -> `Center`; *Vertical Alignment* -> `Middle`; *Background* -> `WHITE`; *Padding* -> `X-Wide`
4. Into the `boxContent` include a new **Text** component, name it `textContent`, and *Value* -> "`CONTENT`".

### 2. Add a Render Condition

The Render property of the Box `boxContent` must check the state of the Checkbox `chbContent`.

1. Update `boxContent` Visibility -> Render -> `chbContent.value` (ƒx)

### The Conclusion

The *Render condition* can be more complex in dependency on an application need. Let's check the *List of Available Functions* and try to make your condition.

{% hint style="info" %}
Follow up on our *Conditional Routing* tutorial <https://youtu.be/KOB3CkiErS0>
{% endhint %}