7 ms·

The problem is not just styling, but usability, the API, and even accessibility too. Example, a multi-select, see https://jsfiddle.net/z0Ltxh47/1/ https://jsfi

The problem is not just styling, but usability, the API, and even accessibility too. Example, a multi-select, see https://jsfiddle.net/z0Ltxh47/1/ https://jsfiddle.net/z0Ltxh47/1/ : Usability is bad because I can't select multiple non-consecutive items by using just my mouse. It's very narrow by default, and doesn't allow me to resize. API: Your typical HTMLInputElement.value doesn't give me all the selected values. I need to map the .selectedValues to their values, or innerText if no value exist. Horrific. Accesibility: At least in Firefox, using ctrl+arrows to be able to focus on elements to select them do not render any focus targets. In Chrome, the contrast is not there. Don't even get me even started with the date/time-picker.

marcosdumay 5y ago
To be fair, multi selection is a disaster on any platform. It is a hard concept that isn't completely solved by any of the standard GUI widgets.
- egeozcan 5y ago
  There are problems even with the single selection (searching for an option in mobile, consistent contrast, copying selected value etc.). Depending on the application, sometimes to fix such problems, you need to reimplement the component in js or you start won't fix'ing tickets. So articles like this really underestimate the problems with the existing controls and the lack of some.
- cabalamat 5y ago
  I would probably use a series of checkboxes for the same effect.
- com2kid 5y ago
  Hilariously, lots of good implementations on mobile. Long tap to start, checkbox next to each item that is then selected. Confirm button when done selecting.
  - Shared404 5y ago
    I actually really dislike this. I find that I often have half second hangups due to not remembering if in select mode or not. Much prefer the "Hold shift/ctrl" model used often in file managers.
    - kreetx 5y ago
      Parent is talking about mobile. And on Android it's working rather well I'd say. The only downside I see is that selecting longer spans (shift click) is not possible.
      - Shared404 5y ago
        In the context of the parents comment I thought they were comparing that model to others where multi selct exists. I don't think there is a much better model on mobile, except possibly adding a button to each item to select a longer span.
        com2kid 5y ago
        Browser requires very fine degree of dexterity, and has 0 discoverability. Mobile ones often have a "start multi-select" button in the UI. Neither is an amazing experience, but IMHO the mobile one is somewhat better.
      - spiralx 5y ago
        There are Android apps where you can select two items in a list and then there's a button that selects all of the items between them, which is equivalent to a shift-click.
- nine_k 5y ago
  A separate multi-select control is just a bad idea from 1990s; it should be disused and forgotten. The proper way is a list of checkboxes. Checkboxes are easy to recognize, easy to style, and easy to navigate and operate.
  - crooked-v 5y ago
    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.
- galaxyLogic 5y ago
  Multi-select is what you have in File Explorer. You can select multiple files and folders for copying or deletion or moving. It is not a disaster
- ehnto 5y ago
  The most robust solution is to individually toggle selected state on each item, and don't unselect all on a new click. Like a checkbox. Click once for selected, once to unselect, don't unselect all on any click. A multi-select drop down is just solving the problem of a checkbox list being too long, or not what the designer wants it to look like. The most clear UI for this input type is a set of checkboxes in my opinion. Same for a single item select and radio buttons. Drop downs have a lot of caveats, and unique compositions in the wild, so many of them are inaccesible and it's essentially just because someone wanted it to look pretty. I think that is bad software.
cookiengineer 5y ago
How about some checkboxes and labels with the for attribute then?
- iamben 5y ago
  Aren't we then back at the problem? Creating a drop down selectable list using checkboxes and labels? ...And then to make that drop down pretty, and the checkboxes look neat, we'll set their opacity to 0 and remove pointer events, use CSS to style the label and set a nice looking tick using the 'before' content, which changes when the checkbox is selected... And oh, there again!
- egeozcan 5y ago
  Which becomes a nightmare to look at with no styling: https://jsfiddle.net/wdqjyvsu/ https://jsfiddle.net/wdqjyvsu/ and then it gets complicated very quickly: https://jsfiddle.net/wdqjyvsu/1/ https://jsfiddle.net/wdqjyvsu/1/ You also have still undiscovered problems: How to let people filter the options if you have lots of them (and don't say ctrl+f because it doesn't restrict the search within the element)? What about lazy-loading if you have lots and lots and lots of them? Usability is not improved, it takes too much space now. API is even worse. Accessibility is improved contrast-wise but all the tabbing is not very friendly, and try using that with a screen-reader. It takes ages to make a selection.
  - lhorie 5y ago
    No offense, but this feels like trying too hard to make the argument that a perfectly normal pattern is somehow too obtuse to be considered. I'm guessing you're trying to argue that something like a pill autocompleter is more appropriate for specific use cases (e.g. the `to:` field in email clients). And sure, sometimes some controls are better suited than others depending on the use case, but that doesn't necessarily mean that it's impossible to implement similarly complex controls by leveraging standard controls as opposed to reinventing headless behaviors on top of div soup[0] [0] https://codepen.io/lhorie/pen/xxPJpeB https://codepen.io/lhorie/pen/xxPJpeB
    - 5y ago
ironmagma 5y ago
Say what you will about ActiveX, but it allowed a much more native feel for web pages.
- jraph 5y ago
  Native feel is not wanted (anymore). Branded appearance is. (and I think this is unfortunate. I wish developers didn't attempt to replace my browser's perfectly fine-looking, accessible checkboxes by their own often ugly custom implementations for instance. And I'm not hating on web devs, I'm one of them) XUL [1] seemed like a good idea as a basis for building native-looking web applications. It's too bad it has been abandoned. [1] https://en.wikipedia.org/wiki/XUL https://en.wikipedia.org/wiki/XUL
  - ironmagma 5y ago
    I think both are wanted. People like it when they have the usability and familiarity of native widgets, but it’s nice when they also have theming and personality. A good example is TweetBot, which is a normal iOS app except it’s not, or OmniFocus which does things in a native way except everything is purple.
  - MaxBarraclough 5y ago
    > XUL seemed like a good idea as a basis for building native-looking web applications. It's too bad it has been abandoned. Didn't XUL do roughly what React Native, and other similar frameworks, do today? edit I see that XUL did its own rendering rather than using native widgets, but the overall goal seems about the same.
tomger 5y ago
The js fiddle example works great on iOS. I didn’t realize mobile safari supported a multi-select sheet!
- nedt 5y ago
  Yes it really is. And now imagine someone would instead use a custom multi-select, because their browser has a bad implementation. Actually the best example why custom form elements shouldn‘t be used. You can still write one as an add-on for your browser and help others or use it as poc for a ticket to the browser vendor.
- josephg 5y ago
  Even in desktop Firefox (on linux) I immediately tried to: - Multi-select by Ctrl+clicking on other items I want selected. (works) - Shift-click to expands the selection linearly from the focus (works) - Select one item, then Shift+Up/Down arrows to expand the selection. (Works) I bet a custom control would be missing most of that behaviour as well. Mind you, those affordances are completely unknown to most users. I bet if you asked most users (even developers) how to select multiple items in that control, 9/10 would struggle. The input control doesn't make its affordances obvious at all. So in all, I'm confused what the browser vendors expect people to do here. I'd love to use the built in controls. But as others have said, they're often ugly, they confuse people, their APIs are a mess and they're difficult to style.
cycomanic 5y ago
What is the problem exactly seems to work fine on Firefox mobile
worldsayshi 5y ago
>I can't select multiple non-consecutive items by using just my mouse Well you can with ctrl-click. A well hidden feature though.
- egeozcan 5y ago
  > using just my mouse

marcosdumay 5y ago

To be fair, multi selection is a disaster on any platform. It is a hard concept that isn't completely solved by any of the standard GUI widgets.

egeozcan 5y ago
There are problems even with the single selection (searching for an option in mobile, consistent contrast, copying selected value etc.). Depending on the application, sometimes to fix such problems, you need to reimplement the component in js or you start won't fix'ing tickets. So articles like this really underestimate the problems with the existing controls and the lack of some.
cabalamat 5y ago
I would probably use a series of checkboxes for the same effect.
com2kid 5y ago
Hilariously, lots of good implementations on mobile. Long tap to start, checkbox next to each item that is then selected. Confirm button when done selecting.
- Shared404 5y ago
  I actually really dislike this. I find that I often have half second hangups due to not remembering if in select mode or not. Much prefer the "Hold shift/ctrl" model used often in file managers.
  - kreetx 5y ago
    Parent is talking about mobile. And on Android it's working rather well I'd say. The only downside I see is that selecting longer spans (shift click) is not possible.
    - Shared404 5y ago
      In the context of the parents comment I thought they were comparing that model to others where multi selct exists. I don't think there is a much better model on mobile, except possibly adding a button to each item to select a longer span.
      - com2kid 5y ago
        Browser requires very fine degree of dexterity, and has 0 discoverability. Mobile ones often have a "start multi-select" button in the UI. Neither is an amazing experience, but IMHO the mobile one is somewhat better.
    - spiralx 5y ago
      There are Android apps where you can select two items in a list and then there's a button that selects all of the items between them, which is equivalent to a shift-click.
nine_k 5y ago
A separate multi-select control is just a bad idea from 1990s; it should be disused and forgotten. The proper way is a list of checkboxes. Checkboxes are easy to recognize, easy to style, and easy to navigate and operate.
- crooked-v 5y ago
  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.
galaxyLogic 5y ago
Multi-select is what you have in File Explorer. You can select multiple files and folders for copying or deletion or moving. It is not a disaster
ehnto 5y ago
The most robust solution is to individually toggle selected state on each item, and don't unselect all on a new click. Like a checkbox. Click once for selected, once to unselect, don't unselect all on any click. A multi-select drop down is just solving the problem of a checkbox list being too long, or not what the designer wants it to look like. The most clear UI for this input type is a set of checkboxes in my opinion. Same for a single item select and radio buttons. Drop downs have a lot of caveats, and unique compositions in the wild, so many of them are inaccesible and it's essentially just because someone wanted it to look pretty. I think that is bad software.

cookiengineer 5y ago

How about some checkboxes and labels with the for attribute then?

iamben 5y ago
Aren't we then back at the problem? Creating a drop down selectable list using checkboxes and labels? ...And then to make that drop down pretty, and the checkboxes look neat, we'll set their opacity to 0 and remove pointer events, use CSS to style the label and set a nice looking tick using the 'before' content, which changes when the checkbox is selected... And oh, there again!
egeozcan 5y ago
Which becomes a nightmare to look at with no styling: https://jsfiddle.net/wdqjyvsu/ https://jsfiddle.net/wdqjyvsu/ and then it gets complicated very quickly: https://jsfiddle.net/wdqjyvsu/1/ https://jsfiddle.net/wdqjyvsu/1/ You also have still undiscovered problems: How to let people filter the options if you have lots of them (and don't say ctrl+f because it doesn't restrict the search within the element)? What about lazy-loading if you have lots and lots and lots of them? Usability is not improved, it takes too much space now. API is even worse. Accessibility is improved contrast-wise but all the tabbing is not very friendly, and try using that with a screen-reader. It takes ages to make a selection.
- lhorie 5y ago
  No offense, but this feels like trying too hard to make the argument that a perfectly normal pattern is somehow too obtuse to be considered. I'm guessing you're trying to argue that something like a pill autocompleter is more appropriate for specific use cases (e.g. the `to:` field in email clients). And sure, sometimes some controls are better suited than others depending on the use case, but that doesn't necessarily mean that it's impossible to implement similarly complex controls by leveraging standard controls as opposed to reinventing headless behaviors on top of div soup[0] [0] https://codepen.io/lhorie/pen/xxPJpeB https://codepen.io/lhorie/pen/xxPJpeB
  - 5y ago

ironmagma 5y ago

Say what you will about ActiveX, but it allowed a much more native feel for web pages.

jraph 5y ago
Native feel is not wanted (anymore). Branded appearance is. (and I think this is unfortunate. I wish developers didn't attempt to replace my browser's perfectly fine-looking, accessible checkboxes by their own often ugly custom implementations for instance. And I'm not hating on web devs, I'm one of them) XUL [1] seemed like a good idea as a basis for building native-looking web applications. It's too bad it has been abandoned. [1] https://en.wikipedia.org/wiki/XUL https://en.wikipedia.org/wiki/XUL
- ironmagma 5y ago
  I think both are wanted. People like it when they have the usability and familiarity of native widgets, but it’s nice when they also have theming and personality. A good example is TweetBot, which is a normal iOS app except it’s not, or OmniFocus which does things in a native way except everything is purple.
- MaxBarraclough 5y ago
  > XUL seemed like a good idea as a basis for building native-looking web applications. It's too bad it has been abandoned. Didn't XUL do roughly what React Native, and other similar frameworks, do today? edit I see that XUL did its own rendering rather than using native widgets, but the overall goal seems about the same.

tomger 5y ago

The js fiddle example works great on iOS. I didn’t realize mobile safari supported a multi-select sheet!

nedt 5y ago
Yes it really is. And now imagine someone would instead use a custom multi-select, because their browser has a bad implementation. Actually the best example why custom form elements shouldn‘t be used. You can still write one as an add-on for your browser and help others or use it as poc for a ticket to the browser vendor.
josephg 5y ago
Even in desktop Firefox (on linux) I immediately tried to: - Multi-select by Ctrl+clicking on other items I want selected. (works) - Shift-click to expands the selection linearly from the focus (works) - Select one item, then Shift+Up/Down arrows to expand the selection. (Works) I bet a custom control would be missing most of that behaviour as well. Mind you, those affordances are completely unknown to most users. I bet if you asked most users (even developers) how to select multiple items in that control, 9/10 would struggle. The input control doesn't make its affordances obvious at all. So in all, I'm confused what the browser vendors expect people to do here. I'd love to use the built in controls. But as others have said, they're often ugly, they confuse people, their APIs are a mess and they're difficult to style.

cycomanic 5y ago

What is the problem exactly seems to work fine on Firefox mobile

worldsayshi 5y ago

>I can't select multiple non-consecutive items by using just my mouse Well you can with ctrl-click. A well hidden feature though.

egeozcan 5y ago
> using just my mouse