• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

3-Step Wizard

Participant ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

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?

TOPICS
Design , How to

Views

187

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

correct answers 1 Correct answer

Community Expert , May 10, 2022 May 10, 2022

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/defaul

...

Likes

Translate

Translate
Community Expert ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

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!

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
Participant ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

LATEST

Thank you.

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