Figma Support Forum

Checkboxes with Hover - Uncheck not possible

Hi, I’m doing Product Design for Desktop Applications and I was really looking forward to this release! Finally.

I’m not sure if I do something wrong or if this is a bug.
I have checkboxes with a hoverstate.
So, right now I’ve connected them as follows:
CHECK
grey-empty checkbox goes while hovering to blue empty checkbox.
blue-empty checkbox goes by click to the grey checked-checkbox.
UNCHECK
the grey checked-checkbox goes to blue checked-chedkbox while hovering.
the blue checked-checkbox goes by click to the grey empty-checkbox.

The CHECK part works, but not the UNCHECK part.

Your image doesn’t seem to match your description - you would need 4 lines to achieve hover and click between 2 states (checked/unchecked).

But I might be able to assume your issue - make sure that the click interactions are on the hover states. If they are on the default (inactive) state then the hover interaction will happen first and then there is no way of triggering the click.

Hi James, thanks for your fast response.

Sorry, if my image was misleading. There are actually 4 lines. 2 hovers and 2 clicks.

I also made sure that the click is set on the hover state … so this cannot be the issue.

Hmmm, sorry I’m out of ideas. I’m also just starting to play with interactive components.

Good luck!

Have you tried reloading the prototype tab?

Thank you tank! Yeah, I already tried to reload it several times. Also, I’ve tried to detach and attach the connection once more … did not help :frowning:

Can you share the file? I do the same as in your screenshot, but everything works for me.

Thanks a lot for trying to reproduce my issue. Yes! Sure.
Here is my link. I can check it but cannot uncheck it.
Maybe I’m missing a very obvious button? :smiley: Or maybe it is only not working for me?

Your file is experiencing problems due to the nesting of the component instance in variants. You can do it as in my example or with the correction of yours.

1 Like

Aaah, it is the .base that was missing. I thought, that I got rid of these nesting, but that was not the case! Thank you! I will correct it on my end and will let you know if it worked :slight_smile: Thanks a lot for your help!

Worked!! Thanks a lot.