Skip to main content
Participant
January 6, 2023
Answered

Single selection - of multiple component and states (Radio buttons)

  • January 6, 2023
  • 1 reply
  • 1403 views

hi,

how do I create a single selection of components (out of a group\multiple components) - for example - if I have 4 components (each has default and toggle state)? so in the case of selecting item one, this should change other items to default states. and if I will select item 2 (after selecting item 1, this should change to default state instead of toggle state.

hope this was clear... 

thanks,

Noga

    This topic has been closed for replies.
    Correct answer Noga Deutsch

    Actually that was what I meant, making the whole thing a component and changing its state by inner elements, I think the toggle menu logic would help you there right? https://www.youtube.com/watch?v=MWr4xgvQx18  

    You can also use the logic of the accordion menu/FAQ page tutorial since there can only be one item selected there also: https://www.adobe.com/products/xd/learn/design/layout/faq-page-design.html Let me know if this doesn't help, I might try and see tomorrow!


    thank you @AkinGn  for the tips. I did watch youtube, I had some delays - so I have replaced the default to hover, and this reduced the "double-click" to switch... thanks again!

    it was helpful!

    Noga

    1 reply

    AkinGn
    Community Expert
    Community Expert
    January 6, 2023

    Hi @Noga Deutsch, I'd suggest making the whole form a component and depending on the radio button clicked, changing the state of the component to "1-selected", "2-selected" etc. And in "1-selected" state as you guess, the first radio button should be selected while others remaining unselected and so on. Hope this helps!

    Participant
    January 6, 2023

    thank you. I did create 1 selected, 2 selected....

    but... how can I define that only one state can be active... for some reason this is not the behavior I'm experiencing.

    what did I miss? 😞

    Participant
    January 6, 2023

     just created an example.. these are not the actual values... just for the discussion...

    thanks,

    Noga