Hidden inputs

Working on a project where labels had to be shown as buttons and were mutually exclusive, I had to hide radio buttons. All of a sudden they didn't work anymore.

So I'm putting up test cases here to diagnose the problem and find a solution.

Protocol:

  1. Simple form with 3 radio inputs with labels and a button
  2. Whenever an action is detected on an input or a label, show a "You clicked [+ value]" feedback
  3. Whenever the form is submitted either through Enter or click on the button, show a "You submitted [+ value]" feedback
Sample page, no hiding OK
This works as intended: focus on radio button, hit Enter, selection gives feedback
Radios hidden with display:none, no behaviour added NOK
Focusable labels with tabindex="0" NOK
Radios hidden with opacity+position rather than display:none (as per an anwser on Stackoverflow) NOK
Clipped, absolutely positioned radios (as per a suggestion by MichielBijl) OK
Absolutely-positioned radios with width and height set to 1px (as per a suggestion by Rodney Rehm) OK
TODO? JS behaviour
Seemingly, what I want to achieve can only be done by jumping through hoops in Javascript: create a fake label that acts as a button, and associate it with radios for checked/unchecked statusMay not be needed

Last update: 29 January 2016