Accessible Multiselect Dropdown

on in Blog
Last modified on

Sometimes you need to turn a multiple dropdown into a multiple checkbox selector. No other bells and whistles, no search, no custom functionality, no JavaScript dependencies. I’m working on one, currently 300 lines of JavaScript, gracefully degrading to a <select multiple>.

Note #1: This is beta, and some things might change!

Note #2: This will eventually be part of Thin UI.

See the Pen Accessible Multiselect Dropdown by Ciprian (@ciprian) on CodePen.

Future Improvements

  • Better looking dropdown button
  • Absolutely positioned dropdown popup
  • Complete documentation and demo page

I have tried lots of solutions out there, and I’ve even settled for tail.select for some projects. They are too glitchy sometimes and have way more features than I’ll ever need. The basic requirement for me is a multiple <select> dropdown element with checkboxes and search.

Related posts