How to toggle a variant based on a switch?

Hello! If I wanted to toggle a component variant based on the value of a toggle switch, how would I go about referencing the component?

I’ve attached a screenshot of my code where I have a switch and a text input. I basically want to remove the disabled variant toggle whenever the switch is active and vice versa.

Thanks in advance!

The issue I am facing is how to reference the text input inside of the switch onChange listener.

Hi @royal_fox,
You can create a local state in the component. Let’s name it isToggled

Let’s say your variant name for Switch is isActive and disable variant name for input is isDisabled

We can do something like below

// local state variable
const [isToggled, setIsToggled] = React.useState(false)
  isActive: isToggled,
  onChange: e => setIsToggled(!isToggled)

  isDisabled: !isToggled,
  onChange: e => {
    // strict check, 
    // it's optional if disabled is 
    // passed on to internal input properly
    if(!isToggled) return

Awesome, appreciate the quick response. Y’all are the best!