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:
https://app.atomic.io/d/SFliErAu6yDV

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

If you’re confident to use Javascript, then you may like to add radio buttons by directly manipulating the DOM. If so, check out our tutorial on Inserting radio buttons 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 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.
https://app.atomic.io/d/ahB9plBdes4o

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. 

Did this answer your question?