Using Interactions, you can turn static symbols into interactions with different states, then place wherever the interaction is needed! 

Radio buttons are a very common component of forms, and this short tutorial will show you how to create one for your prototype.

Learn more about High-Fidelity prototypes

Watch this example work in browser.

Let’s build it! 👷‍♀️

Download Sketch file here

After you've designed you button (Or used the file above), select the symbol and hit Prototype Tab > Interaction > Create

Create all the states you need:

  1. Start with all radio buttons off
  2. Next, Credit card on, Gift card off
  3. And the last possible state, Credit card off, Gift card off

The difference between radio and checkboxes is that radio buttons go off when another radio button is clicked on. Let do that!

❶ From State 1, connect Credit card Radio to where the Credit card Radio button is on.

❷ Do the same for the when the Gift Card Radio button is on.

 ❸ And now let’s enforce so that only one selection can be made. Create an interaction to where the opposite option is on. 

These last two interaction will also allow the user to change their option after they had already selected something.

All done!

After this, go back to Sketch Instances and click Preview in Browser and take a look at your work!

Learn More

Get started with these tutorials: 

Did this answer your question?