Does anyone else think HTML5 multiple select sucks?

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.

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.

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.

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

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

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.

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?