Style Classes Element State Checked

I am having troubles with the Element State Checked, with using a Checkbox. User manual indicates this should work when the component is in the "on" State.

Anyhow, this is the style I am trying to use.

image
image
image

The Hover works as intended, however the Checked Element State does not.
image
image
image

I have updated the gateway to 8.1.30, thinking maybe this had been fixed from 8.1.24. That didn't work.

I have also tried a Toggle and Radio Button, both of which didn't work as well when the component was selected. The only way I could get it to work was binding the style class to the selected property. However, this involves 2 different styles and I am trying to steer clear of having to do that.

Using the browser's dev tools, I can see the :hover element state gets applied to the checkbox component but not the :checked element state. I want to say that since the checkbox component has styles for checked and unchecked exposed in the properties this element state doesn't apply to it, but I could be wrong.

Where does the user manual say this?


image

Right here.

It is odd, it should be super straight forward. I can get the Active Element State to work, but not the Checked.

Hi, im having the same problem, is there any fix or workaround?