The community member is experiencing an issue where the styles they apply to the Radix "Switch" component in the styles panel do not sync with the canvas. They can see the changes in the CSS preview, but the switch's checked and unchecked states do not reflect the applied styles.
Other community members have tried to replicate the issue, but some have not been able to. One member noticed that the token state is "checked," but the switch appears to be in the unchecked state. Another member shared a link to a preview, where the styles look correct, but the issue persists in the builder.
The community members have tried various approaches, such as checking the "checked" state and toggling the switch in the play canvas, but the issue remains. The main problem seems to be with the styling, where the styles set in the panel do not match what is displayed on the canvas, particularly with regards to color and the "translate" property.
One community member finally understood the issue and explained that the Radix component does not automatically toggle the "checked" property based on the token state. Instead, the switch needs to be manually toggled in the play canvas to see the changes in the "checked" state.
There is no explicitly marked answer, but the community members have collectively tried to understand and troubleshoot the issue
Is it normal that when styling the RADIX "Switch" component, I don't see changes in the checked and unchecked states on the canvas? I can see the changes in the CSS preview, but they don't sync with the styles panel.
@szymonszczechowicz, I can't replicate the issue. The colors change for me. I did notice that your state of the token is "checked", yet the switch state looks to be unchecked (default).
Do you mean that you've tried changing the state and the switch doesn't actually change in the canvas (like this video)?
If you press the "play" button at the top right and toggle the switch, you can go back to the edit mode and change the color of the "checked" mode, and it will work.
The issue is with styling. In the styles panel, I set the component state to "Checked," but the styles don't match what I see on the canvas. This affects things like color and the "translate" property. In the preview, everything looks correct. I tried to show this in the video. Sorry for not explaining the problem clearly.
Ah, I finally understand what you mean. I created a new switch with no styling. It seems like you're expecting the "checked token attribute" to toggle the "checked property." However, the Radix component doesn't work that way; you'd need to manually switch it from the play canvas. The @Webstudio Team might have some extra information; is it possible/advisable to bind the token state and property state?
