This tutorial walks through how to make a set of checkboxes, which display a set of choices — from which a user may select several.

Here is a sample that demonstrates it in action: https://app.atomic.io/d/SFliErAu6yDV

If you’d like to have only one item in your group of choices able to be selected at once, check out our tutorial on radio buttons

If you’d like a sample of a checkbox that is just for use by itself (not needed to be part of a group, and that works independent of any other checkbox on the canvas), then you can copy this sample: https://app.atomic.io/d/9mH7WlvSxUfq

If you’re confident to use Javascript, then you may like to add checkboxes by directly manipulating the DOM. If so, check out article on ‘Inserting checkboxes straight into the DOM’. 

To support this tutorial, here's a 2 min demo video showing precisely how to copy and use these components. https://vimeo.com/269841607
 

Step 1: Copy the checkbox into your project

Open the link to the checkbox component below, and then select ‘Copy & Edit’ and copy it to the project where you would like to use it.
https://app.atomic.io/d/9mH7WlvSxUfq

This checkbox is a ‘smart’ component. The ‘smart’ refers to built-in logic which looks to other buttons within the component it is part of to ensure only one is selected, and also links to a variable to keep track of the selected button. We’ll cover this more at the end.

You can restyle this component easily by altering the existing elements, or replacing them with your own.
 

Step 2: Place and duplicate for each checkbox

Now we can place the new ‘smartCheckbox’ component onto the canvas. 

In the editor, open the component browser by pressing the keyboard shortcut ‘C’ or select the ‘Place a component’ tool from the left hand toolbar. 

Select the component ‘smartCheckbox’. 

Now duplicate the component instance for each item you require. For example, you’ll want three instances if the options are ‘dog’, ‘cat’, or ‘tiger’. 

Your group of checkboxes will now work when previewed.
 

Step 3 (optional): Store the selected items as a variable

If you would like to keep track of what checkboxes have been selected for use elsewhere in the prototype, then complete step 3. If not, jump straight down to step 4. 

Rename the component instances & convert them into a wrapper component

Select each instance, and then in the Layers panel, rename each layer only using alpha characters. For example, if your options represent your favourite animal, name the layers tiger, shark, dog, and spider. 

Select all of the component instances that you have just renamed, and convert them into a component by selecting ‘Component’ in the top menu.

Select ‘Back’ in the top left to navigate back to the top level of your prototype. 

Add a variable

Rename the wrapper component to a single word (e.g. animalsThatILike).

Open the Variables modal, by selecting keyboard shortcut ‘V’, or the ‘Manage project variables’ tool in the left hand toolbar. 

Add a new variable that has the exact name of the wrapper component you just renamed (e.g. animalsThatILike).

Add the default value of [] (an empty array) and set the evaluation type to ‘JavaScript’. 

Press Save to close the variables modal.
 

Step 4: (optional): Select one of the boxes to be ‘on’ by default

Open up the wrapper component, and select the instance you would like to be checked by default. 

In the properties panel on the right, set the State field to ‘on’. 

Back out of the component.

Note: you do not have to update the variable array; this will be updated at runtime.
  

Step 5: Preview

Use the keyboard shortcut Command + Enter, or select ‘Preview’. You can now select any of the buttons, but only one at a time. 

If you completed step 4, open the developer tools console on a Mac by pressing Option + Command.

Notice the variable being updated in there to the selected items. All of the selected items are being stored as the variable value, so you can use it in other places if you need to. 

Did this answer your question?