Skip to main content
Question

Multi-select component using conditionals

  • February 17, 2025
  • 1 reply
  • 53 views
Robyn-U

I’m working on an onboarding experience for a fashion app, when the user onboards they can set their sizes in a set of screens.

I’m trying to build a prototype where the user can select multiple sizes, and if 1 or more is selected the CTA state turns to active, if 0 the state changes to deactive, so far I’ve got this working but only on the 1st size pill in the list (UK 2 in screenshot), for some reason it doesn’t work on the rest, clicking any other size does nothing but they’re all using the same component.

I’ve got 2 variables, size selected = false, CTA active = false. With conditionals of: If size select=false, on click, set size select=true and CTA active=true (and vice versa)

Can anyone help how I’d achieve this? I tried adding a new variant with a size selected value>= 1 but it didn’t work, I feel like I’m on the right track with this but I can’t work it out!

Design for context: 

 

Raphael_M
  • Raphael_M
  • Power Member
  • February 19, 2025

 

 

Hi, Robyn.

 

You’re somehow correct, but you don’t really need the pill boolean var.

 

You need these variables:

pillCount to track the number of selected pills, ctaDisabled to set the CTA button’s disabled state.
​​​​​

 

 default pill variant:

need to set it directly on the component
- onClick change it to selected or onClick variant
- set the pill count variable to (pillCount + 1) which means every click = a + 1 to the pill count
- create a condition that say if pillCount (variable) is greater than or equal to “number you want” then set the ctaDisabled (boolean variable) to false or true depending on your setup

 

selected pill variant:

- onClick change it to the default variant
- set the pill count variable to (pillCount - 1) which means every click is equal to a deduction of 1 to the pill count variable
- create a condition that says if pillCount(variable) is less than “number you want” then set the ctaDisabled (boolean variable) to false or true depending on your setup.

 

 

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings