This tutorial walks through how to make a group of radio buttons — which display a set of mutually exclusive options from which a user may select only one.
Here is a sample that demonstrates it in action:
If you’d like to have multiple items able to be selected at once, check out our tutorial on checkboxes.
If you’d like a sample of a radio button that is just for use by itself (not needed to be part of a group, and that works independent of any other radio button on the canvas), then you can copy this sample: https://app.atomic.io/d/ceIaJJiXWcDA
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 radio button into your project
Open the link to the radio button component below, and then select ‘Copy & Edit’ and copy it to the project where you would like to use it.
This radio button 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, duplicate and rename a component instances for each button
Now we can place the new ‘smartRadioButton’ 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 ‘smartRadioButton’.
Now duplicate the component instance for each item you require. For example, you’ll want three instances if the options are ‘male’, ‘female’, or ‘other’.
Select and then in the Layers panel and rename each layer only using alpha characters. For example, if your options represent your favourite animal, name the layers tiger, shark, dog, and spider.
Step 3: Convert instances into a wrapper component
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. Your group of radio buttons will now work when previewed.
Step 4 (optional): Store the selected item as a variable
Rename the wrapper component to a single word (e.g. favouriteAnimals).
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 component you just renamed (e.g. favouriteAnimals).
Press Save to close the variables modal.
Step 5: (optional): Select one of the buttons to be ‘on’ by default
Open up the wrapper component, and select the component you would like to be ‘on’ by default.
In the properties panel on the right, set the State field to ‘on’.
Back out of the component.
Step 6: 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 item. The selected item is being stored as the variable value, so you can use it in other places if you need to.