Making Select Boxes Much More User-Friendly

Select boxes. Yes, those nasty, long, unwieldy things that we have to use sometimes so that users can select their country or time zone. Never fun to use, are they? Especially when the user has a small display, such as a mobile device, or (in the case of long forms) when the select menu appears at the very bottom of the browser’s viewport and the user has to scroll down a bit in order to see all of the options in the input field. It doesn’t have to be this way.

Chosen offers an alternative approach to select menus. It’s a JavaScript plug-in that lets users just start typing what they’re looking for. Non-matching entries are removed from the view, and options can be selected using “Enter” or a mouse click. The plug-in works with standard select input fields as well as with multiple selects and optgroup. It also has support for selected, disabled and default text (HTML5’s placeholder attribute). The plug-in is currently available in jQuery, MooTools and Prototype flavors and as a Drupal 7 module, and it can be forked on GitHub. Unfortunately, the script doesn’t work properly on mobile devices yet, so some tweaks are necessary. Otherwise, it’s a clean solution to a grimy common problem in Web form design.