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.Radio buttons in interactive wireframes
To design radio button 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, right-click on the selection, and select ‘group’.
    Note: the radio buttons must be grouped to function correctly in this example.
  3. Drag a Dynamic Panel onto the Canvas and click the ‘+’ icon to add another sub-panel.
  4. In 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 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) to be set as active.Radio buttons events in your interactive wireframes
  7. Select the upper Radio Button. Go to the Events palette and add another “On Click” + ‘Set Active Panel” event, this time selecting Panel 1 to be set as active.

Click “Simulate” to interact with your prototype.

You can download our example here.