Interactive component states

[srunick]

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 !

[AkinGn]

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! 

[srunick]

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

[AkinGn]

@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.

[thomashallgren]

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.

[srunick]

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

[srunick]

Hello All,

I want to implement promotion code in checkout page.

When the code is valid it shall reduce the payment amount else display an error message.

Is there an option in Adobe XD to allow user to input the code in textbox ?

I created a component default state as code in textbox and toggle as success message.

Please clarify how can I implement the promotion code in payment ?

Thanks!

[thomashallgren]

Try creating a component, then adding a state. 

[srunick]

Yes I created a component of Einlösen button and the default state is checkout page on toggle it redirects to success page. How can I redirect to error page when there is no option of user input in promo code textbox ? Thanks !