Programmatically toggle Switch

[guygit]

Provide a general summary of the issue here

The docs do not mention the use case how to programmatically trigger the Switch.
Since you are exposing an inputRef property, I assumed I could do it like so:

`
useEffect(() => {
ref.current.checked = true;
}, [update]

..
`

However that doesn't work.

🤔 Expected Behavior?

Switch should toggle

😯 Current Behavior

Switch doesn't toggle

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

`
useEffect(() => {
ref.current.checked = true;
}, [update]

..
`

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

You should use a controlled value for this use case, and update the value programmatically.

The visually hidden input is dependent on the state of the Switch component, which wouldn't get updated in that case.

[guygit]

Thx for the feedback.

I already tried that as well, but I cannot observe that the Switch is actually moving.
const [value, setValue] = useState('low'); useEffect(() => { setTimeout(() => { setValue('high'); }, 2000); }, []); <Switch name="power" value={value}> Lo bro </Switch>

[reidbarber]

Try passing isSelected={selected}, where selected is a boolean. The value attribute is used for the form element value.

[guygit]

Reid - fantastic! (I was thinking "isSelected" was a read-only prop)

Thank you very much!