# Selectable Container

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-3903bbfd576d827731b31faabb3912865ad2d559%2Fselectable-container-v181-0.png?alt=media)

The Selectable Container Web control is a [Container](container-web-control) that has an Event for when any control in the container is selected or clicked. The selectable container is used as a part of the checkbox List and Radio List, and can be used with repeaters.

## General

### Control Properties

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### Data Binding

#### Selected

Expects type `boolean`.

The value will evaluate to `TRUE` if the container is selected. When the container is unselected, the value will evaluate to `FALSE`. By default, the value is `NULL`.

### Style and Layout

Containers and their elements can be styled. See [Common Style Properties of Web Controls](web-controls-overview/common-style-properties-of-web-controls).

## Actions

#### Value Changed

Action chain that runs when the Selectable Container is clicked.

## Advanced

### State

### Is Visible

Expects type `boolean`.

If `TRUE` the container will be visible. If `FALSE` the container will not be displayed. If the field is empty, the container will be visible.

## Example #1

To build a single Checkbox, add a Selectable Container to the Web Page and nested in the Selectable Container, add a Checkbox and a Label. The Label will be used to describe the Checkbox.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-c37c6fa74c72ca8ad61392eaba1317aa2a40e64f%2Fselectable-container-v181-1.png?alt=media)

Create a Variable as type `boolean` and add it to the Data Binding value of the Checkbox.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-adb555adbf1aea49ee33646bda2890aa82c9ce1b%2Fselectable-container-v181-2.png?alt=media)

Then on the Value Changed event, set the Variable to the opposite of itself. This will store the value of the state of the Selectable Container to the Variable.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-b9d6c76d5c86c27b460a87a76220b5f0bcdfb8cb%2Fselectable-container-v181-3.png?alt=media)

## Example #2

Selectable Containers can be added to Container Lists. First, add the Container List, and then nested underneath add the Selectable Container. Any Web Control can then be added. This example shows an added Label.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-c859474f5a111821373e391f182abc937d18bf4c%2Fselectable-container-v181-4.png?alt=media)

Each item in the Container List can then have its own selected state. To do this, create a Variable of type `List of Boolean`. For this example, the variable is `activity.selected_repeater`. Then on the Selectable Container, on the **Value Changed** event, set the Variable to the following:

```javascript
activity.selected_repeater[index] = NOT(activity.selected_repeater[index])
```

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-4d36815f2505447d28e2a1383546024d585669a3%2Fselectable-container-v181-5.png?alt=media)

Each Selectable Container in the list will have access to its own selectable state. Use cases for this can include changing the background of the container when selected or a task list that changes icons when marked as done.
