# Conditional Visibility
With the `Visibility` property, you can control which UI elements you want to show in the app, based on the API data.
You could choose to hide certain elements within a list upon certain conditions, or display some UI elements only to specific users, among other cases.
## 📲 How to use it
The `Visibility` property must be bound to a data item containing a [**boolean value**](https://en.wikipedia.org/wiki/Boolean_data_type). This means, the value of the data item needs to be either **True** or **False**.
There are two ways to configure it:
* **Make it visible**: The UI element will show.
* **Make it hidden**: The UI element won't show.
The way to define a boolean data type will depend on the backend tool. For instance, in Airtable, these values can be defined with a checkbox. Then, these boolean data items can be bound to the `Visibility` property for a UI element. \
\
**When "Make it visible" is selected:**
* If the data item has a **False** value, the UI element won't show.
* If it has a **True** value, the UI element will show.
**When "Make it hidden" is selected:**
* If the data item has a **False** value, the UI element will show.
* If it has a **True** value, the UI element won't show.
{% hint style="info" %}
Remember that the value returned by the API needs to be a boolean (true/false) or a number (1/0), **never a string.**
{% endhint %}
Some examples are shown below. Note that there are more possible cases than the ones described on this page, and they can be combined in the way you wish. Feel free to be creative!
{% hint style="info" %}
If you are using conditional visibility on a [stateful component](https://docs.bravostudio.app/bravo-tags/components/stateful-component-like-button), make sure you set the visibility at the group level.
{% endhint %}
### Hide some items in a list
You could choose to control from the backend which list items you want to display in the app in a specific moment. To do that, add a **boolean field** to your database items, and bind its corresponding data item to the `Visibility` property of the **list container element**.
{% embed url="" %}
You can also control the visibility of an item binding the `Visibility` property of the list container to a non-boolean field: if that field for a specific **data record is empty**, the list item won't be shown.
For instance, you could hide all the list items that don't have an image in the database, as shown below.
{% embed url="" %}
### Hide a UI element on some items in a list
It's also possible to hide a specific UI element inside a list data item. For instance, you could choose to display a piece of text, a badge or a button depending on a boolean value in the database. That UI element would be hidden for some of the list items, depending on that boolean field.
To do that, bind the `Visibility` property of the UI element inside the list container to the corresponding data item. In this example, we control the visibility of a text element inside the list item, while showing all the list elements. We could also control the visibility of the whole items separately, by binding the `Visibility` of the list container as shown in the previous examples.
{% embed url="" %}
### Hide a single UI element
The Visibility property can also be used for single elements outside lists. For instance, you could control the visibility of some elements in a [detail page](https://docs.bravostudio.app/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-detail-page).
To do that, you'll need to select the boolean data item (in this case Show Description) in the [detail API request](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection/airtable/data-library-connect-to-any-api-get-request-for-detail-page) used for the detail page. Then, bind this data item to the `Visibility` property of the corresponding UI element.
In this example, we'll control the visibility of a description text inside a detail page.
{% embed url="" %}
.gif?alt=media&token=8f74a10d-93e7-43b4-a15e-c298de956587)
