Ask HN: HTML multi-select not user-friendly on desktop?
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? 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. 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. I'd change the styling on it to have a larger height if the scrollable area is the concern. Oh right that makes sense thank you! 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? 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. Because if it is a large list, you give up massive amounts of screen real estate to a gigantor pile of checkboxes. Have you tried Slim Select ? https://slimselectjs.com/