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

1 pointsTiredGuy1y ago8 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?

8 comments

codingdave1y 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.

TiredGuyOP1y 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.

codingdave1y ago

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

1 more reply

pavel_lishin1y 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?

carlosjobim1y 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.

codingdave1y ago

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

Daril1y ago

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

j / k navigate · click thread line to collapse

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

1 pointsTiredGuy1y ago8 comments

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)

8 comments

codingdave1y ago

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.

TiredGuyOP1y ago

codingdave1y ago

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

1 more reply

pavel_lishin1y ago

carlosjobim1y 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.

codingdave1y ago

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

Daril1y ago

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

j / k navigate · click thread line to collapse