5 ms·

Now make that a set of 200 checkboxes and see how practical it is compared to one combobox-style multi-select input.

nine_k 5y ago
200 checkboxes make about as much sense as a 200-item dropdown. Neither is manageable. The multi-select dropdown is additionally hard to check for the selections made. An input box with pill-style auto-completion (see e.g. the tags control on Stackoverflow) would be a reasonable alternative. Another, larger alternative is the typical two-lists control, with selected items moved from the source list to the target list; this idiom was widely used in Windows since 1990s. It's not mobile-friendly though.
- egeozcan 5y ago
  > 200 checkboxes make about as much sense as a 200-item dropdown. Neither is manageable. Multi-select is okay there, apart from the problems I mentioned above: https://jsfiddle.net/z0Ltxh47/2/ https://jsfiddle.net/z0Ltxh47/2/ . I can navigate to i19 with a few key strokes. Only if it were then possible to easily select a1... > An input box with pill-style auto-completion (see e.g. the tags control on Stackoverflow) would be a reasonable alternative And we are back at implementing our custom controls again.
  - nine_k 5y ago
    > And we are back at implementing our custom controls again. Sadly, yes. Not everything was anticipated at the times of Netscape 2. HTML5 added a number of native controls, like video players and calendars. I wish a better "native" multi-select alternative surfaced, too. OTOH I suppose that browsers are going to blur the line between "native" controls and web components and such.
    - 8n4vidtmkvmk 5y ago
      I think there's an initiative to improve these... but I can't find it at the moment. Googling anything with "native" just turns up react-native crap.
  - derefr 5y ago
    > And we are back at implementing our custom controls again. Are we? Why wouldn't we just push OS vendors to add "input box with pill-style auto-completion" as a native toolkit widget, and then have browsers expose it? The OS vendors have proven willing to add stuff like native OS date/time/number-picker widgets, so why not this one?
- dillondoyle 5y ago
  I like the pattern of drop downs where you can type to filter. But I've found there isn't great UI in that it's not super obvious you can type.
  - bil7 5y ago
    I was actually implementing exactly this today in Angular and went with a <mat-autocomplete> https://v5.material.angular.io/components/autocomplete/overview https://v5.material.angular.io/components/autocomplete/overv...
- jcelerier 5y ago
  An input box like SO's isn't discoverable though, it's not good for things that you "want but don't know exist yet"
earthboundkid 5y ago
You just need a fuzzy text filter at the top to hide the checkboxes you don't care about.
- egeozcan 5y ago
  I think this thread just about proved how insufficient the available controls are.
pc86 5y ago
Multiselect over a range of 200 arbitrary values isn't something that will ever be solved by a single control, so that's a complete straw man. If you actually need to multi-select over 200 arbitrary values (you almost certainly don't), the best way to do it I've seen is a way to filter the displayed items, a "Select All" button for what's visible based on that filter, and maintaining the "checked" state through filter changes, allowing you to select anything matching multiple filters.
- blacklion 5y ago
  this problem was solved around 1986 by Norton Commander and one of the main reasons why two-panel file managers (FAR, mc, TotalCommander) are still in use. When you decouple selection with cursor and make selection "permanent", so you can move around this list without fear to lose accumulated selection, you could pick needed elements one-by-one, sort list by any attributes to simplify selection, apply filters, etc.
  - sleightofmind 5y ago
    Yep. When marking many files for selection the twin-pane file managers let your mind (and your stomach) rest easy. I sometimes use ranger with two or more tabs to similar effect. There was/is a Tcl/TK twin-pane file manager I liked called FileRunner. It's showing it's age now and needs a rewrite -- not for beauty, which I'm not too concerned about, but for some glitches that have crept in with time and lack of maintenance. It seemed more mouse friendly than some other twin-pane FMs (or maybe it's just rose-tinted memory).
    - blacklion 5y ago
      I'm using FAR in Windows (10 now) every day. I'm using it as my command-lime shell, really, never run cmd or powershell. For everything my console needs (and I'm using a lot of coretools/filetools in the form of mingw64). I don't know how to live on Windows without it, it is first program I install, even earlier than alternative browser.
- munk-a 5y ago
nkrisc 5y ago
If your UI has 200 checkboxes displayed at once, in an ideal world you’re rethinking your requirements and redesigning the UI. The only way to make a 200 item select box usable is to make it not a 200 item select box somehow.
- ehnto 5y ago
  By filtering to search, which is also a UI fraught with inaccesiblity if not very carefully designed. I think custom elements aren't the issue here really, it's the lazy implementations.
  - nkrisc 5y ago
    Think bigger even. In an ideal world, if you have that many options you might want to rethink the entire workflow. I understand in the real world that may not be an option, but it’s still probably the ideal state.

200 checkboxes make about as much sense as a 200-item dropdown. Neither is manageable. The multi-select dropdown is additionally hard to check for the selections made. An input box with pill-style auto-completion (see e.g. the tags control on Stackoverflow) would be a reasonable alternative. Another, larger alternative is the typical two-lists control, with selected items moved from the source list to the target list; this idiom was widely used in Windows since 1990s. It's not mobile-friendly though.

egeozcan 5y ago
> 200 checkboxes make about as much sense as a 200-item dropdown. Neither is manageable. Multi-select is okay there, apart from the problems I mentioned above: https://jsfiddle.net/z0Ltxh47/2/ https://jsfiddle.net/z0Ltxh47/2/ . I can navigate to i19 with a few key strokes. Only if it were then possible to easily select a1... > An input box with pill-style auto-completion (see e.g. the tags control on Stackoverflow) would be a reasonable alternative And we are back at implementing our custom controls again.
- nine_k 5y ago
  > And we are back at implementing our custom controls again. Sadly, yes. Not everything was anticipated at the times of Netscape 2. HTML5 added a number of native controls, like video players and calendars. I wish a better "native" multi-select alternative surfaced, too. OTOH I suppose that browsers are going to blur the line between "native" controls and web components and such.
  - 8n4vidtmkvmk 5y ago
    I think there's an initiative to improve these... but I can't find it at the moment. Googling anything with "native" just turns up react-native crap.
- derefr 5y ago
  > And we are back at implementing our custom controls again. Are we? Why wouldn't we just push OS vendors to add "input box with pill-style auto-completion" as a native toolkit widget, and then have browsers expose it? The OS vendors have proven willing to add stuff like native OS date/time/number-picker widgets, so why not this one?
dillondoyle 5y ago
I like the pattern of drop downs where you can type to filter. But I've found there isn't great UI in that it's not super obvious you can type.
- bil7 5y ago
  I was actually implementing exactly this today in Angular and went with a <mat-autocomplete> https://v5.material.angular.io/components/autocomplete/overview https://v5.material.angular.io/components/autocomplete/overv...
jcelerier 5y ago
An input box like SO's isn't discoverable though, it's not good for things that you "want but don't know exist yet"

earthboundkid 5y ago

You just need a fuzzy text filter at the top to hide the checkboxes you don't care about.

egeozcan 5y ago
I think this thread just about proved how insufficient the available controls are.

pc86 5y ago

Multiselect over a range of 200 arbitrary values isn't something that will ever be solved by a single control, so that's a complete straw man. If you actually need to multi-select over 200 arbitrary values (you almost certainly don't), the best way to do it I've seen is a way to filter the displayed items, a "Select All" button for what's visible based on that filter, and maintaining the "checked" state through filter changes, allowing you to select anything matching multiple filters.

blacklion 5y ago
this problem was solved around 1986 by Norton Commander and one of the main reasons why two-panel file managers (FAR, mc, TotalCommander) are still in use. When you decouple selection with cursor and make selection "permanent", so you can move around this list without fear to lose accumulated selection, you could pick needed elements one-by-one, sort list by any attributes to simplify selection, apply filters, etc.
- sleightofmind 5y ago
  Yep. When marking many files for selection the twin-pane file managers let your mind (and your stomach) rest easy. I sometimes use ranger with two or more tabs to similar effect. There was/is a Tcl/TK twin-pane file manager I liked called FileRunner. It's showing it's age now and needs a rewrite -- not for beauty, which I'm not too concerned about, but for some glitches that have crept in with time and lack of maintenance. It seemed more mouse friendly than some other twin-pane FMs (or maybe it's just rose-tinted memory).
  - blacklion 5y ago
    I'm using FAR in Windows (10 now) every day. I'm using it as my command-lime shell, really, never run cmd or powershell. For everything my console needs (and I'm using a lot of coretools/filetools in the form of mingw64). I don't know how to live on Windows without it, it is first program I install, even earlier than alternative browser.
munk-a 5y ago

nkrisc 5y ago

If your UI has 200 checkboxes displayed at once, in an ideal world you’re rethinking your requirements and redesigning the UI. The only way to make a 200 item select box usable is to make it not a 200 item select box somehow.

ehnto 5y ago
By filtering to search, which is also a UI fraught with inaccesiblity if not very carefully designed. I think custom elements aren't the issue here really, it's the lazy implementations.
- nkrisc 5y ago
  Think bigger even. In an ideal world, if you have that many options you might want to rethink the entire workflow. I understand in the real world that may not be an option, but it’s still probably the ideal state.