# Repeating Elements

Another common use case in form development is the repetition of items from a collection. For example, selecting a house from a list of houses, or picking out a doctor from a list of practicing physicians. While it is possible to present this to the user with a dropdown list, there may be additional information associated with each of the options to present to the user. One such solution is to use Lists of options in a form.

### Building Out a List

Airkit’s repeaters make it easy to build repeatable content tied to lists of data. These repeaters can be used to display collections of content, but they can also be used to create dynamic, selectable content. Selecting a single house from a list of houses is a great example.

Building this out will require the use of a Checkbox List Component. For each house, let's show a house title, picture, square footage, bedroom count, bath count, and asking price. Users will be able to select the houses they are interested in.

Step one is to create some user data for the Houses object. Create a custom [AirData App Object](../../working-with-data/airdata/airdata-app-objects) for the house with the fields **title** (text), **picture** (asset), **square\_footage** (number), **beds** (number), **baths**(number), and **asking** (currency). Create a [Data Flow](../../studio/data-flows) to return all the houses from the table.

Create a new Web Flow. Add a web page. Add a title label with the text "Select the Houses you are interested in:" Add a [Checkbox List](../../web-controls/checkbox-list-web-control) and a submit button.&#x20;

On the Web Page create two variables of type List of Houses. Name one **houses** and the other **selected\_houses.** Click on the Advanced Tab of the Inspector and add an action to run the Data Flow to put the entire house list into the **houses** variable.

Select the Checkbox List and set the value to **selected\_houses**, set the Data field to **houses**, and the Selected Field to:&#x20;

```javascript
CONTAINS(  
  selected_houses,  
  item  
)
```

Using the [CONTAINS](../../airscript-expressions/list-functions/contains)() function this expression checks to see if the current house (the **item**) is in the collection of selected houses. The Checkbox list will take care of adding a selected house to the **selected\_houses** array.&#x20;

Configure the checkbox cell to contain all the information in each house object.&#x20;

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-b77d966e30dcb45eeb4f97fd94b31a13e115ab2b%2Frepeating-elements-v1715-0.png?alt=media)

Lastly, it is time to configure the return value. Because of the way Checkbox Lists work, in order to send only the selected options to a Data Flow from the **selected\_houses**, filter out the empty options:

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-221532a2168c8b4f93254853ff46ac0d3d358775%2Frepeating-elements-v1715-1.png?alt=media)

Putting this all together, the experience collects users selections and passes the selected values to the output data flow:

![organizing info](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-bac0d4b2de5bdbf76a900c58c8cea680973e3169%2Frepeating-elements-v1715-2.gif?alt=media)
