What if I told you you could just use a ‘select’ with the ‘multiple’ attribute, without compatibility or usability issues?

That would be magic, right? That is why I created a polyfill for a native ‘select[multiple]’. It uses the native multiselect on mobile and a custom one on desktop. Data submission and validation work as expected, and accessibility is guaranteed because the solution relies on native form elements. Using it looks like this:

<label>Multiselect 1</label>
<select multiple required>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

<script src="multiselect.js"></script>
<link rel="stylesheet" href="multiselect.css" />

The styling is kept to a minimum, but it includes a custom ‘down arrow’ on the selects. The ‘required’ attribute still triggers native client-side form validation, and the component supports the advanced ‘optgroup’ element. On mobile, there is a little ‘plus’ next to the label to switch to the desktop version of the multiselect, in case the mobile detection returns a false positive.

Source & demo: https://code.usecue.com/multiselect/

()  Joost van der Schee