I am just trying to setup a basic 2 button toggle using radio buttons and styling their label. I believe this is called the “checkbox hack” because we hide the input.

Theres 2 buttons, one with the value “SELECTED” (initially selected) and the other, “ALL”. For some reason when I click on All it becomes checked but the Selected button doesn’t get unchecked.

Here is a little Gist I created with the relevant code: https://gist.github.com/ajess33/4cac3666e0a6311b3b6dd8f4f61d6875

I figured the issue was due to the inputs not being inside of a form, but after adding in the form it still didn’t work.

I would greatly appreciate any help on this!

Initial state with “Selected” button checked

What happens when I click All. The Selected button should no longer have the checked styles