Does anyone else think HTML5 multiple select sucks?

twitter logo github logo ・1 min read

Am I the only one who thinks that html5 multiple selects are not intuitive for the web? I mean they are fine, work fine but I have to use CMD (or CTRL) to select more than one, doesn't feel as a web-ish thing πŸ™ƒ

Maybe it's just me being paranoid πŸ€ͺ

The thing is that I'm looking for a decent javascript module to handle multiple selects like Chosen or Select2 but without jQuery as dependency. Any suggestions?

twitter logo DISCUSS (11)
markdown guide

Yeah, I hate them.

I prefer multiple options as tags. It's clear to the user that to remove a selected option they have to click on the little x at the end of the option.

We shouldn't assume people would now the keyboard shortcuts, because they won't.


You might as well just generate a scrollable list of checkboxes:

const Multiselect = ({name, options = []}) => {
  return (
    <ul style={{overflow: 'auto'}}>
      {options.map(({ value, label, selected }) => (
            <checkbox name={`${name}[]`} value={value} checked={selected}/>

const options = [
  { value: 1, label: 'magic', selected: false },
  { value: 2, label: 'sauce', selected: true }

render(<Multiselect name="yourFieldName" options={options}/>, document.body);

Why complicate your life? 😁

Ignore above advice if you have a really long list and you need filtering. But given that the original doesn't support anything like that, it's a fair comparison.


Perhaps you should also post an example in vanilla JS.


Funny enough, I started with vanilla, but it was a bit noisy with all the createElement|TextNode bits so much more conveniently expressed in JSX. But yeah, agree, it's creature comfort and unnecessary.


I always do my own thing, without the need of ctrl. Click selects and click again deselects.


They are the worst form control ever implemented. Im pretty sure at least 60% of the people surfing the internet don't know that you need to cmd/ctrl + click in order to select more values.

I try to avoid them most of the times, using a dynamic list of single selects which spawn another row below everytime you select a value from the last.


It's potentially a really useful native html element but it relies on users knowing how to ctrl/cmd/shift + click (on desktop at least). Sure you can explain it with some text but I've never used it in production. If it worked like a list of checkboxes where you can click to select/deselect items in the list it would be a vast improvement.


It's pretty terrible... Chosen and Select2 are great, and I think there's some really good multiselect components in Polymer, Angular, Vue, and React. I built one forever ago for React similar to Select2, but I'd have to dig that guy up from... Somewhere...

Of course, if we could get something in our everyday web standards library baked into every browser, that would be ideal :D


That's probably a carry-over from how it worked on the desktop.

If you don't like this, what is your suggestion for how it should work?


In my mind, I wish closer to how they tend to work on a mobile device.

Select the dropdown, and small little popup of your choices shows up and check the ones you want.

After working with many clients it seems this is how a lot people want it to work. We have gotten many requests to turn our multiple selects into closer how they are rendered on Chrome on Android for example, than how they are done on the desktop by default. Of course it all depends on the situation for how the UI should be handled for selecting multiple things.

Classic DEV Post from Mar 25 '19

How To Brand Yourself When Switching Careers Into Software Development

How do you brand yourself if you are from a non-tech field and wanting to make the switch into software development?

Juan Manuel Ramallo profile image
learning everyday πŸ€“