Updated: March 15, 2019 to use Flexbox instead of float 🙌
Form inputs are annoying, let’s face it. There is a ton of data showing the more fields you have in a form, the higher the bounce rate of that form. I decided to play with radio buttons and try make them more like simple toggle buttons. After a bit of playing, I got it working in a clean, easy to use style. This makes your form very clear and fast to fill out for your user. Win.
Let’s see it in action
You can play with the CodePen below to see/feel it actually working.
See the Pen Radio button toggle switch by Mike Hemberger (@JiveDig) on CodePen.
Some key points to note:
- The regular radio input is hidden with
“appearance: none;”“display:none;”screen reader text CSS taken from Genesis. - The input label actually becomes the pseudo-buttons
Other then that, it’s pretty straightforward. Give it a try and let me know what you think in the comments!
