All Collections
FAQ
FAQs for Design
How to Create a Radio Button in Sketch with Anima 
How to Create a Radio Button in Sketch with Anima 

Bring Life into Prototypes with Interactive Forms

Or avatar
Written by Or
Updated over a week ago

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.

Let’s build it! 👷‍♀️

Download Sample 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 interactions 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!

❗️Please note:

  • Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.


Learn More

Did this answer your question?