Creating interactive radio buttons in the same canvas

New Here ,
Aug 04, 2022 Aug 04, 2022

Copy link to clipboard

Copied

I'm just learning XD and grasp the concept of component states and have create radio buttons that select and desect (change states) on tap. I've also learned how to link multiple versions on separate canvases to simulate how radio actually buttons work. Alone this is fine, but how do you integrate that "flow" onto another canvas e.g. if you want a functionaing radio button on a form. Is there a way that doesn't require having mulitple with differnt states of the form?



Views

76

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 04, 2022 Aug 04, 2022

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines