Juan Manuel Ramallo

Posted on Oct 11, 2018

Does anyone else think HTML5 multiple select sucks?

#discuss #javascript #html #webdev

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?

Top comments (11)

rhymes • Oct 11 '18

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.

Matteo Rigon • Oct 11 '18

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.

Klemen Slavič • Oct 11 '18 • Edited

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.

Nick Karnik • Oct 11 '18

Perhaps you should also post an example in vanilla JS.

Klemen Slavič • Oct 11 '18

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.

K • Oct 11 '18

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

Ben Junya • Oct 15 '18

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

Lee Jordan • Oct 12 '18

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.

Nick Karnik • Oct 11 '18

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?

Chad Smith • Oct 11 '18

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.