DEV Community

Jude
Jude

Posted on

Turn a checkbox into a button without any javascript.

Sometimes checkboxes aren't the best UI/UX for your users, especially if you have a lot of options that you need to give to a user to choose from.

This technique allows you to turn a checkbox into a button, creating a larger click area and also giving better context to what the user is selecting.

NOTE: In the HTML it's important that the input comes before the label.

And that's it. If you have any questions or it's not clear what's going on, or even if you have a better way of achieving this, feel free to comment below.

Top comments (0)