Multicolumn checkboxes?

I have a checkbox picker (multiple options), with a large number of short options. I’d like to format this as two columns (in order to save space). Is there any way to do this?

I tried horizontal instead of vertical (got all on a single line). I tried “wrap” (back to vertical). I tried two Checkbox List elements with the same variable name (the container horizontal, each list vertical). This displayed correctly, but the user could only select multiple elements in one of the columns; selecting an element in the other column cleared all checkboxes in the first column.

Is there any way to do multicolumn checkboxes, that are “select as many as you want”?

Like this:
compass

Hi Don! I’ve attached an export of what this would look like in the studio.

First i would add a container to my page and put two checkbox lists in the container. The structure of this would look like this:

On the container, you need to distribute the children to stack horizontally:

Then i would edit each of the Data Properties of each checkbox list to the proper lists of data. In my first checkbox list i have

[ "North", "South", "East", "West" ]

In my second checkboxlist i have:

[
  "Northwest",
  "Southwest",
  "Northeast",
  "Southeast"
]

Each of these checkbox lists store the selected values into an array. At the end of this, you essentially have two arrays of your selections. You can use this airscript expression to combine the two arrays and remove the NULL values.

FLAT(
    [
      checkbox_list,
      checkbox_list_1
    ]
  )[?(@ <> NULL)]

NOTE: checkbox_list and checkbox_list_1 are the variables bound to the two checkbox lists.

At the end of it, you’ll get something like this:

Zip file of the solution:
Multi-Column_Checkboxes-2022-07-25T19_49_10.361Z-full.branch.zip (18.0 KB)

2 Likes

This worked great. Thanks so much for the step-by-step instructions.

1 Like