Skip to main content
srunick
Participant
Oct 11, 2022 9:23 AM UTC
Question

Interactive component states

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 !

This topic is closed to new replies. Start a new post to keep the conversation going.

8 replies

srunickAuthor
Participant
Dec 14, 2022 10:07 AM UTC

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!

Translate
thomhallgren
Inspiring
Dec 15, 2022 1:55 AM UTC

Try creating a component, then adding a state. 

Translate
@thomashallgren
srunickAuthor
Participant
Dec 15, 2022 8:23 AM UTC

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 !

Translate
thomhallgren
Inspiring
Oct 13, 2022 6:20 AM UTC

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.

Translate
@thomashallgren
    srunickAuthor
    Participant
    Oct 13, 2022 6:56 AM UTC

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

    Translate
    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    Oct 11, 2022 11:38 AM UTC

    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! 

    Translate
      srunickAuthor
      Participant
      Oct 13, 2022 6:58 AM UTC

      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

      Translate
      AkinGn
      Community Expert
      AkinGnCommunity Expert
      Community Expert
      Oct 13, 2022 10:24 AM UTC

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

      Translate
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices