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.
To design radio buttons with 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 and group them together.
- In this way, they will act in sync (when one is selected, the other cannot be).
- Drag a Dynamic Panel onto the canvas and create two panels.
- 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.
- In the 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) and click “OK”.
- 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.
Click “Simulate” to interact with your prototype.
You can download our example here.