3 ms·

I was just wondering how people do a custom <select multiple> now. I guess they make it screen-reader-only and then have aria-hidden checkboxes for everyone els

by dqv 2y ago

I was just wondering how people do a custom <select multiple> now. I guess they make it screen-reader-only and then have aria-hidden checkboxes for everyone else.

sureIy 2y ago
"Select multiple" is just a list of checkboxes. The missing part (which is also missing from select) is just the filtering. I am not holding my breath for a decent "select multiple" field. It's been the same crap for decades and browsers could have fixed it long again without waiting for spec - it's just a "replaced element", but they don't care. The fun part is that it looks amazing on Safari iOS (and QED it's rendered as a list of checkboxes)
- TimTheTinker 2y ago
  > "Select multiple" is just a list of checkboxes. Not necessarily. I've seen more than one production app with a custom filtering dropdown list of items with checkboxes. I built a couple variants of that in React at my last gig for the company's design system. The keyboard nav was complex... that component is one of the work artifacts that I'm most proud of.
  - sureIy 2y ago
    > custom filtering dropdown I already said that. "Select" is not filterable in the browser already, so `select[multiple]` has no chance of seeing that in this decade. However you slice/style it, it's just checkboxes (that you can filter/reorder)
- mjrpes 2y ago
  I commented on this a few weeks ago. There are two future components under development that look to support selecting multiple options in a dropdown format. Search textbox: would be supported under the more customizable Combobox element Select Multiple: both the Enhanced Select and Combobox plan to support this Combobox: https://open-ui.org/components/combobox.explainer/ https://open-ui.org/components/combobox.explainer/ Enhanced Select: https://open-ui.org/components/customizableselect/ https://open-ui.org/components/customizableselect/

by dqv 2y ago

I was just wondering how people do a custom <select multiple> now. I guess they make it screen-reader-only and then have aria-hidden checkboxes for everyone else.

sureIy 2y ago

"Select multiple" is just a list of checkboxes. The missing part (which is also missing from select) is just the filtering. I am not holding my breath for a decent "select multiple" field. It's been the same crap for decades and browsers could have fixed it long again without waiting for spec - it's just a "replaced element", but they don't care. The fun part is that it looks amazing on Safari iOS (and QED it's rendered as a list of checkboxes)

TimTheTinker 2y ago
> "Select multiple" is just a list of checkboxes. Not necessarily. I've seen more than one production app with a custom filtering dropdown list of items with checkboxes. I built a couple variants of that in React at my last gig for the company's design system. The keyboard nav was complex... that component is one of the work artifacts that I'm most proud of.
- sureIy 2y ago
  > custom filtering dropdown I already said that. "Select" is not filterable in the browser already, so `select[multiple]` has no chance of seeing that in this decade. However you slice/style it, it's just checkboxes (that you can filter/reorder)
mjrpes 2y ago
I commented on this a few weeks ago. There are two future components under development that look to support selecting multiple options in a dropdown format. Search textbox: would be supported under the more customizable Combobox element Select Multiple: both the Enhanced Select and Combobox plan to support this Combobox: https://open-ui.org/components/combobox.explainer/ https://open-ui.org/components/combobox.explainer/ Enhanced Select: https://open-ui.org/components/customizableselect/ https://open-ui.org/components/customizableselect/