Ask HN: HTML multi-select not user-friendly on desktop?

1 points by TiredGuy 1 year ago | 8 comments

Yesterday I was reviewing an HTML form with my UX colleague, and he said we should change all our <select multiple> elements to collections of checkboxes instead since selecting multiple things with it is just too unintuitive for desktop users.

Shift+click to select consecutive multiple

Ctrl+click to select non-consecutive multiple

Shift+Up/Down to select consecutive multiple with keyboard

Ctrl+Up/Down then release Ctrl, then Space to select non-consecutive multiple with Keyboard

(for mac of course replace Ctrl with Cmd)

This surprised me since it is a built-in html standard element, but kind of makes sense after thinking about it. What do you think? In contrast I do like how it renders on mobile, where it basically does render as a series of checkboxes. Would it be better if desktop browsers redesigned it to look more like mobile?

codingdave 1 year ago |

If there are only a few items, yes - checkboxes are great for short lists. But if it is a long list, no - a huge pile of checkboxes is awful. So if your list contains more than a dozen items, just stick with the multi-select.

And you are right to just use the built-in UX the browser offers. Flawed it may be, but it is standard. Don't confuse your desktop users by inventing something new. They know their own browser.

TiredGuy 1 year ago | |

Thanks! That reminds me I did bring up the thing about long lists and he said that's even more reason to use checkboxes since the multi-select has such a tiny scroll window it makes it hard to scroll through to find what you need when there are a bunch of options.

codingdave 1 year ago | | |

I'd change the styling on it to have a larger height if the scrollable area is the concern.

pavel_lishin 1 year ago | |

Why is a multi-select better for a large selection than a series of checkboxes? iirc, multi-selects suffer from the problem that if you accidentally mis-click on one entry, it'll unselect every other previously-selected entry, no?

carlosjobim 1 year ago | | |

You can click and drag to select a bunch of options at once, just like you click and drag to select files in your file manager.

codingdave 1 year ago | | |

Because if it is a large list, you give up massive amounts of screen real estate to a gigantor pile of checkboxes.

Daril 1 year ago |

Have you tried Slim Select ? https://slimselectjs.com/