Learn how to prototype web and mobile apps

How to add radio buttons in input forms in your interactive wireframes

Enable or disable portions of input forms in your interactive wireframes with radio buttons and dynamic panels.

In this tutorial, you will learn how to use a radio button group to control that effect.

You can download the example below here.

Radio buttons in interactive wireframes

1) Create a new prototype and drag Text widgets, Check boxes and Radio buttons onto the canvas, and lay them out to match the first portion of the above example. 

Add a radio button widget to your interactive wireframes

2) Select the two radio buttons and group them (just the radio buttons, not the Text widgets). In this way, they will act in sync (when one is selected, the other cannot be).

3) Drag a Dynamic panel widget onto the canvas and create two panels.

4) In the first panel, drag Text widgets, an Input text field and a Select list to match the second portion of the example above. Uncheck the ‘editable’ box in style properties of the two input fields in the Properties tab.

5) In the second panel, add the same Input fields and Text widgets but this time leave them as editable.

Uncheck the 'editable' option in the Input field properties of your interactive wireframe

6) Now it’s time to define the events. Select the bottom Radio button and go to the Events tab. Add a new event: an ‘On click’ + ‘Set active panel’ event. Select panel number 2 (the one with the inputs activated) and click OK.

Radio buttons events in your interactive wireframes

7) Now select the upper radio button. Go to the Events tab and add another ‘On click’ + ‘Set active panel’ event, this time selecting panel 1.

Note that radio buttons must be grouped to function in the correct way. When you’ve added all the events in each panel, right click on each group of radio buttons and select “Group”.

And that’s all folks! Click ‘Simulate’ and enjoy!

Next tutorial > Add Interactive Thumbnails to your wireframes