Does anyone else think HTML5 multiple select sucks?

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?

Did you find this post useful? Show some love!
DISCUSSION (11)

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 }) => (
        <li>
          <label>
            <checkbox name={`${name}[]`} value={value} checked={selected}/>
            {label}
          </label>
        </li>
      ))}
    </ul>
  );
};

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.

I like this! Me and my iPad thank you.

Classic DEV Post from Feb 24

What little things make you happy while coding?

I must say refactoring code to make it look beautiful is my guilty pleasure ...

READ POST
Follow @gonzalezanguita to see more of their posts in your feed.
Juan Manuel Ramallo
Bolivian living in Argentina looking forward to become a jedi master of programming ๐Ÿ‘พ

The only way to keep up with JavaScript trends is with the help of community.

Join dev.to โค๏ธ