Designing with radio buttons in forms

With Justinmind, you can enable or disable portions of input forms in your prototypes with the help of Radio Buttons and Dynamic Panels.

In this tutorial, you will learn how to use radio buttons in groups.

Radio buttons in interactive wireframes

To design radio buttons with forms, follow these steps:

  1. Create a new prototype and drag Text widgets, Check Boxes and Radio Buttons onto the canvas to match the first portion of our example. 
    • Add a radio button widget to your interactive wireframes
  2. Select the radio buttons and group them together.
    • In this way, they will act in sync (when one is selected, the other cannot be).
  3. Drag a Dynamic Panel onto the canvas and create two panels.
  4. In the Panel 1, drag Text widgets, an Input Text Field and a Select List to match the second portion of our example. Uncheck the “editable” box in style properties of the two input fields in the Properties palette.
  5. In the Panel 2, add the same Input Text 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 palette. Add a new event: an “On Click” + “Set Active Panel” event. Select Panel 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 palette and add another “On Click” + ‘Set Active Panel” event, this time selecting Panel 1.
Note: 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”.

Click “Simulate” to interact with your prototype.

You can download our example here.