Skip to main content
S
srunick
Participant
October 11, 2022
Question

Interactive component states

  • October 11, 2022
  • 3 replies
  • 1499 views

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 has been closed for replies.

3 replies

S
srunickAuthor
Participant
December 14, 2022

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!

T
thomhallgren
Inspiring
December 15, 2022

Try creating a component, then adding a state. 

@thomashallgren
S
srunickAuthor
Participant
December 15, 2022

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 !

T
thomhallgren
Inspiring
October 13, 2022

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
    S
    srunickAuthor
    Participant
    October 13, 2022

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

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    October 11, 2022

    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! 

      S
      srunickAuthor
      Participant
      October 13, 2022

      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
      Community Expert
      AkinGnCommunity Expert
      Community Expert
      October 13, 2022

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

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