Conditional checkbox list

In this tutorial, you will create a checklist with conditional logic, which requires the user to select at least two options.

Setting up the design

  1. Create a text element with a message prompting the user to check off at least two boxes to continue.
  2. Next, create a checkbox with labels. Select the checkbox element from the Forms in Quick Tools panel on the left, hold down the option key, and drag the bottom right handle. Keep dragging to create as many elements as you need. 
  3. Create a text element with an error message. Our error message reads, "You need to have at least two selected to go to the next page!" . Now hide the error message by clicking the eye icon in the layers panel next to this layer's name.
  4. Create the Submit button: select Box from the Quick Tool (or press B key) and draw a rectangle at the bottom. Add the text element “Submit”.

Creating states for the checkboxes


You will now create states for the checkboxes: the unchecked state (Base) and the checked state.

  1. Select the checkbox and the text label, and click Add State in the top bar. An unchecked state (Base) is created automatically.
  2. Create a second (Checked) state and press enter.
  3. Still in the checked state, in the properties panel on the right, scroll down to 'CHECKBOX', and set the checkbox option to "Checked."  
  4. Repeat this for all checkboxes.

Assigning a variable to the checkboxes

You will now create a count variable that will keep track of the number of times the checkboxes are clicked.

  1. Open variables($) in the Quick tools panel and click +New Variable. Next, name the variable(i.e, Count), assign the default value “0”, and press Enter.
  2. Click + on top of the properties panel to add an interaction to the first option.
  3. In trigger, select State change.
  4. Under state, click checked (the second state).
  5. In the action section, select  ‘Set variable’.
  6. Under variable, choose your variable ‘count’ and choose expression in the set variable as dropdown.
  7. As expression type in $count + 1.
  8. Click Add.

Repeat this for all checkbox elements


Create conditionals for each checkbox

  1. Select the checkbox and click the  + icon on the top of the properties panel, to add an interaction.
  2. In trigger, select Value change.
  3. Add a condition with +.
  4. In the first drop-down select Content of element; in the dropdown below, checkbox input.
  5. In the third drop-down, select is true and click  Save condition.
  6. In the action section, choose set Variable .
  7. Choose the name of your variable.
  8. Set the variable as an expression .
  9. As expression type in  $count + 1.
  10. Click Add.
  11. Add another interaction.
  12. Follow the same steps but choose is false for step 5.
  13. As expression type in $count - 1.
  14. Repeat these steps for the rest of the checkbox inputs.

Adding interactions to the submit button

  1. Select the button and add an interaction.
  2. In the trigger dropdown choose click.
  3. Click the + icon to add a condition.
  4. In the first drop-down select Value of variable.
  5. Choose your count variable.
  6. In the third drop-down choose is less than value -> type in “2” .
  7. In the action section, select Show.
  8. Under Element choose your warning message.
  9. Click ADD.

10. You can now preview the final design.