jQueryUI buttonsets have a UX problem

Published on

jQueryUI is much less popular these days, but it is still used widely. Other UI frameworks have solved many of the shortcomings with it, but switching over to Bootstrap or some other UI framework isn’t always the best option. One thing I have noticed is the buttonsets which can be used to style checkboxes and radio buttons are problematic.  Especially so if you are using a custom (not glossy) theme! It simply isn’t clear what state the buttons are in sometimes. See the default widget demos for an example: Icons can help with this but the jQueryUI icons are another sore spot of the framework, and implementing even those icons on buttonsets to indicate button state can be a bit tricky. A very little custom css seems to go a long way though! I tested this on a few different OSes and browsers just in case the unicode icon thing might be a problem but it seemed to work well. Even if that were an issue, using a custom font or other content in the content value should work.

Bootstrap fell victim to this pattern too