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.
To design radio button forms, follow these steps:
- Create a new prototype and drag Text widgets, Check Boxes and Radio Buttons onto the Canvas to match the first portion of our example.
- 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.
- Drag a Dynamic Panel onto the Canvas and click the ‘+’ icon to add another sub-panel.
- 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.
- In Panel 2, add the same Input Text Fields and Text widgets but this time leave them as editable.
- 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.
- 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.