Ask HN: HTML multi-select not user-friendly on desktop? | Hacker News Reader

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

1 pointTiredGuy8 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?

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.

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?

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

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.

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!

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

Reply on news.ycombinator.com