DEV Community

Does anyone else think HTML5 multiple select sucks?

Juan Manuel Ramallo on October 11, 2018

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 C...
Read full post
Collapse
 
krofdrakula profile image
Klemen Slavič • • 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.

Collapse
 
theoutlander profile image
Nick Karnik •

Perhaps you should also post an example in vanilla JS.

Collapse
 
krofdrakula profile image
Klemen Slavič •

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.

Collapse
 
rhymes profile image
rhymes •

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.

Collapse
 
reegodev profile image
Matteo Rigon •

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.

Collapse
 
kayis profile image
K •

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

Collapse
 
leenternet profile image
Lee Jordan •

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.

Collapse
 
mrbenj profile image
Ben Junya •

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

Collapse
 
theoutlander profile image
Nick Karnik •

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?

Collapse
 
twigman08 profile image
Chad Smith •

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.

Collapse
 
eljayadobe profile image
Eljay-Adobe •

I like this! Me and my iPad thank you.