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

Interactive component states

Community Beginner ,
Oct 11, 2022 Oct 11, 2022

Copy link to clipboard

Copied

Hi Team,

I have 4 checkboxes on a wireframe and a confirm button.

How can I ensure the confirm proceeds to next page only if atleast 1 checkbox is checked else display a warning message in Adobe XD?

I have gone through several articles about interactive component states but did not understand validation of fields. Please clarify asap.

Thanks !

TOPICS
Design

Views

213

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 ,
Oct 11, 2022 Oct 11, 2022

Copy link to clipboard

Copied

Hi @srunick, I think answer to some question I replied in the past might resolve this, showing the user a different version of the submit button, depending on an element clicked: https://www.youtube.com/watch?v=yDFVcSVaUrg (sample file link: https://www.dropbox.com/s/88dqqex080czf8n/submit-buttons-to-different-pages.xd?dl=0 ) You can replace the submit button with a version that goes to a different artboard this way, 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
Community Beginner ,
Oct 12, 2022 Oct 12, 2022

Copy link to clipboard

Copied

i have confirm button as a component to proceed to next page. I am not clear on validating checkbox status to redirect after clicking the confirm button

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 ,
Oct 13, 2022 Oct 13, 2022

Copy link to clipboard

Copied

LATEST

@thomashallgren's solution also can work. What I meant was, like in the example I shared, whenever a user clicks a checkbox, just switch the submit button with a version of it, that goes to a different artboard. You don't neeed to validate whether the checkbox is checked, the switch happens as soon as user clicks the checkbox. Hope this helps, if you still are not clear I might test and share a screencast with you later.

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 ,
Oct 12, 2022 Oct 12, 2022

Copy link to clipboard

Copied

Clicking on a box takes the user to another frame. When on an XD frame that has a checked box, the confirm box goes to the next page. Otherwise from the pages without checked boxes, simply display the warning as an overlay.

@thomashallgren

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 Beginner ,
Oct 12, 2022 Oct 12, 2022

Copy link to clipboard

Copied

How to validate that atleast 1 box is checked to proceed with confirm button? I will research about overlay

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