Skip to main content
Syeds
Inspiring
May 10, 2022 11:32 AM UTC
Answered

3-Step Wizard

My goal is the create a 3 step procosess with the next step disabled until the previous step is completed.

Step 01- dropdown menu

Step 02- check box
Step 03- download button

 

I have managed step 01 and step 02 but I am not sure how I can keep the button at a disabled state and enable it via a checkbox tap. Any examples or advice?

This topic is closed to new replies. Start a new post to keep the conversation going.
AkinGn
AkinGnCorrect answer
Community Expert
May 10, 2022 8:59 PM UTC

Hi @Syeds , I suggest you to connect the checkbox button to another artboard or you can create a big component that has checkbox and the button as groups, maybe this video I recently created to solve another problem can help: https://www.youtube.com/watch?v=yDFVcSVaUrg  (and the sample file I used there can be found here: https://www.dropbox.com/s/88dqqex080czf8n/submit-buttons-to-different-pages.xd?dl=0 )

 

You can ceate two buttons side by side, one is the disabled and one is the active/default one, and mask the group to make the disabled one visible, and once the checkbox is tapped, you can slide the disabled one to make the active one visible (by going to the big component's other state, triggered by that tap). Hope this helps!

2 replies

AkinGn
Community Expert
AkinGnCommunity ExpertCorrect answer
Community Expert
May 10, 2022 8:59 PM UTC

Hi @Syeds , I suggest you to connect the checkbox button to another artboard or you can create a big component that has checkbox and the button as groups, maybe this video I recently created to solve another problem can help: https://www.youtube.com/watch?v=yDFVcSVaUrg  (and the sample file I used there can be found here: https://www.dropbox.com/s/88dqqex080czf8n/submit-buttons-to-different-pages.xd?dl=0 )

 

You can ceate two buttons side by side, one is the disabled and one is the active/default one, and mask the group to make the disabled one visible, and once the checkbox is tapped, you can slide the disabled one to make the active one visible (by going to the big component's other state, triggered by that tap). Hope this helps!

Translate
Syeds
SyedsAuthor
Inspiring
May 10, 2022 10:13 PM UTC

Thank you.

Translate