Does `<select multiple>` need a button and popup by default?

[josepharhar]

In my mind, the big complication with doing appearance:base for select multiple is that there's not a clear and easy way to represent multiple selected options in the button.

If we follow what browsers already do by having an in-page listbox for select multiple, it would be really easy to go forward with multi selects.

Do most use cases for multi-select have a button? Is it important? If so, what should be in the button?

[josepharhar]

ios has a button which says how many items are selected, not sure how good that is though.

[josepharhar]

This website also has a select multiple which creates buttons for each selected option inside the button. I think it would be very challenging to try to get something like this standardized. This also looks like something that greg was looking into for combobox?

[lukewarlow]

The above mentioned website design is how we designed (one version of) our multi select. (Scott please forgive us for the input inside the picker UI 👀.)

Chrome Android also does a button that says how many items are selected and then has a dialog that opens. But if one item is selected it displays that in the button.

Firefox android has an awkward Inbetween where it renders as a listbox but when you press it it loads a dialog.

Imo an in-page listbox is a separate component that should be able to be single or multi selectable. One of our other versions of multi select used a dual listbox approach where it would be desirable to embedded in the page.

The default multi select should be a button with a drop down imo. We should also try to standardise something like the iOS/chrome android approach. Or perhaps we can try render the selected options as flex items within a <selectedoptions> element, that can be styled? More complicated designs such as a close button or being able to deselect by clicking on the tags will require JavaScript to do and probably fall foul of content model guidelines because nested interactivity?

[lukewarlow]

https://shoelace.style/components/select#multiple

[brechtDR]

The default multi select should be a button with a drop down imo. We should also try to standardise something like the iOS/chrome android approach.

@lukewarlow I agree that this is the most known pattern when looking at external design systems. What do you mean with standardise iOS/android approach?

Isn't this idea to make it fully customisable and then if desired opt-out via CSS again to show native controls if desired? I think CSS style queries could help with further detection in the future, but unfortunately this is currently only usable on custom properties. I might be reading this wrong :)

[lukewarlow]

ios has a button which says how many items are selected.

I mean have this as the default button contents.

[css-meeting-bot]

The Open UI Community Group just discussed Does `<select multiple>` need a button and popup by default?.

The full IRC log of that discussion

<masonf> jarhar: basically I was just starting to think about select-multiple. On our blog post feedback form, people said they want this.
<masonf> jarhar: if we don't worry about the button, then I can implement select-multiple very easily. So what's the button behavior?
<masonf> jarhar: Lots of examples with button behavior on select multiples. Some have chips for selections with buttons to remove, etc.
<masonf> jarhar: having generated content in the browser to do this sounds... challenging.
<masonf> jarhar: if developers need the browser to do that, then we'll need to figure this out. But if we can do it easily, let's do it.
<masonf> naman: what's the easy solution?
<masonf> jarhar: it would look like select multiple on desktop today, an in-page control with checkboxes.
<masonf> jarhar: they could make their own button that connects to a popover containing one of those.
<masonf> naman: that is acceptable to me
<masonf> q?
<masonf> scotto: it would be nice to give select multiple a glow-up. That'd be it though. I wish Sarah H was here, she did a ton of UX studies on this. It was a tire fire. People don't know how to select items, etc.
<masonf> scotto: there might be browser differences, mobile vs. desktop, etc.
<masonf> q+
<masonf> scotto: maybe do a bit of an update, better styles, etc. That might make sense. People might make it into a popover, that could work. But there might be issues lurking.
<masonf> scotto: checkbox group is a different idea of how to do it.
<masonf> scotto: checkboxes that act like radio buttons, clear checked/not checked state, keyboard activation is easy, etc.
<jamesn> q+
<masonf> ack mason
<masonf> ack james
<masonf> jamesn: would solving select multiple solve the problem for design systems today?
<jarhar> gotta go
<masonf> title: foo

[gregwhitworth]

I've removed the agenda label but it doesn't look like there was a resolution to this

[scottaohara]

nope. no resolution.

select multiple could be a design / updated allowances for children of options (e.g., they can include images) - but otherwise work similar to the current select multiple and allow for the listbox to be rendered as an inline / non-popup element. arguably people could then use script to identify their chosen options and make their own multi-select popup using button/popover.

or select multiple works similarly to the use cases mentioned in this thread, where it's a multi-select popup that's rendered. a few open questions then being:

• how to handle the display of the selected options in the collapsed state
• how should multi-selection work in the popup? (a problem with current multi-select popups is that it's not always clear how to exit them. Some users expect esc to close and cancel, reverting to the previous selected option(s) state (or none if none were selected). Though, various custom implementations
• does a multi-select as a popup actually reuse / repurpose the multiple attribute? wouldn't that be weird if multiple did one thing for classic select, but for styled select it behaves differently?

[lukewarlow]

I think it's worth a discussion on whether we need an embed Vs popup option more generally than select multiple. Because that might sway what we end up doing here.

[josepharhar]

All good points Scott, making it a popup is going to be hard.

does a multi-select as a popup actually reuse / repurpose the multiple attribute? wouldn't that be weird if multiple did one thing for classic select, but for styled select it behaves differently?

One idea I had in mind for this was to use the size attribute to differentiate popup vs in-page since that already happens for single-select, but most mobile browsers already change <select multiple> to use a popup without any other opt in which is different from desktop, so the situation is already a bit messed up.