# Visibility group

A Visibility Group makes sure only 1 of its children is visible at once.

This is important e.g. when moving through a stepper / wizard, or if you just want some group of elements (containers) to be visible at once. It is also handy when you have a large view in Appfarm Create, and you as a developer do not want to see everything at once.

There are two main types of visibility groups, defined by the setting **Control Mode.**

### Uncontrolled

You may add children inside the Visibility Group, for example, 3 containers. The first container with a visibility condition evaluated as TRUE will be displayed in the app. Add different Visible conditions to the different containers.

Another feature with this is that Create will only display the child marked. E.g. you do not see all 3 containers at once.

You may also set **Transition** to **Slide**. In this case, you may leave out the visible conditions on the 3 containers. The end-user will then be allowed to swipe through this list of 3 containers.

### Controlled

The child to be displayed will be controlled by an index. The **Visible Index** should be bound to a variable (e.g. an integer variable added to App Variables, with default value 0). You may manipulate this variable to control which child to display. For our case with 3 containers, the first container is index 0, second index 1 and third index 2. By updating your App Variable, the visible container will be changed.

This is a suitable option for creating wizards or steppers. Add two buttons, *Next* and *Previous*, with on-click actions increasing or decreasing the App Variable bound to the Visible Index of the Visibility Group.

{% hint style="info" %}
A full example setup of Visibility Group s available in our [Showroom](https://showroom.appfarm.app/ui-components/visibility-group)! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appfarm.io/library/ui-components/visibility-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.