You can have a component just for the radio buttons section. Depending on your styling you might have a few different configurations. There are probably plenty of tutorials on YouTube on how to make it, but here's a simple guide:
Let's say you have 4 radio choices.
1. For making things easier, you would make a component for the radio circle with a selected and a default empty state.
2. Then you will make a row - the radio circle component + text, and put that in a group.
3. Duplicate that group so you will have 4 rows / choices.
4. Select all groups and make a component.
5. You will then have to add states for each possible scenario. In the default state nothing is selected. You will then have a state that says "1-selected", and in that state, you switch the state of the radio component in the first row to its 'selected' state. You will then make 3 more states, for each radio choice respectively.
6. Now you need to wire everything in prototype mode. From the default state, you wire each row group to its selected state. So Row 1 goes to state '1-selected', and so on. Once that's done, you have to go into each state and do the same - wire each row to its selected state, skipping the one that's currently selected, since you can't 'unselect' a radio.
If you want to have bolded text for the selected row or some extra styling, you might want to make a component for the whole row with a selected and default states, but it adds a bit of complexity, since you will have to be editing the text for each state for each row anyways. One note: you can't add links to a nested component that point to states of the parent component. Nested components need to be put into a group on their own, and you can add links to the group that point to states of the parent component.
This radio component will handle its own choices and you don't need multiple states for the whole form. You can have it all on one artboard.
1
Reply
AdChoices