#1264: Incubation: Filterable select
Discussions
Log in to see TAG-private discussions.
Discussed
Aug 31, 2026 (See Github)
Dan: No comment yet, but have been looking over the issues. There are 3 options given in the explainer, think they are asking for info from us. The nicest option (B) involves the options being within the element, but this may not work from a webcompat perspective (may break the parser). Option A involves hooking things up with IDs (referencetarget may be needed for shadow DOM). Makes sense but needs more tags. Option C involves an attribute you add to the <select> which magically adds the required elements, but then would require pseudo elements for the styling. Not keen on it due to that, but it seems to be the one gaining momentum.
Dan: Option A seems to be the best in terms of clarity. I don't have strong feelings so am concerned about how it will come across if I appear to endorse one particular one.
Matthew: Same as for reference target, problematic if developers need to do non obvious stuff, will look at it as soon as possible.
Discussed
Sep 21, 2026 (See Github)
Dan: We wrote a response. 3 options they're juggling for how to do it, and I'm undecided which is best. Lightly endorsed one in the response. They're already engaging developers. I could be pretty easily persuaded to endorse another option, but haven't been persuaded yet.
Lola: You'll post your comment
Dan: With the accessibility note from matthew. Won't close the review, since I'm still asking some questions.
Comment by @dandclark Oct 1, 2026 (See Github)
Thanks for sending this to the TAG. We're happy to see this being worked on, as a continuation of prior efforts to make native <select> more customizable and useful.
On the 3 approaches being considered:
For Option B, we agree that webcompat and lack of progressive enhancement is a major issue with this approach and probably sufficient to block it. It'd be interesting to compare with <button>-inside-<select>, which historically also didn't work but is now allowed for customizable select in supporting browsers. Allowing that was a similar breaking change that seems to have been proven feasible. Do you know how current usage of <input>-inside-<select> parsing rules compares to historical dependence on the <button>-inside-<select> parsing rules at the time that change was made? If the usage numbers are comparable or lower for <input>-inside-<select> then this may still be feasible in terms of web compat. Progressive enhancement remains a problem though unless all browser implementations can align in shipping this change.
Assuming B remains a non-starter for those reasons, we'd support an approach like the one proposed here, where <select> gets a filterable attribute as described in Option C that would make the common case easy, and something like Option A is pursued later if there is still demand for flexibility beyond what C can achieve. The internal <input> would need to be styleable through a pseudo element. It's unfortunate though if a lot of properties specific to filtering would need to be added to HTMLSelectElement to support this, especially if they'd be redundant with properties eventually added to HTMLInputElement for Approach A or for Combobox. From the discussion in https://github.com/openui/open-ui/issues/1491 it looks like only a few properties would be needed, but if that list grows this approach should probably be reconsidered in favor of Option A.
We're happy to see that you're engaging with the developer community about these approaches, and if dev feedback strongly pushes towards one of these options, we'd support following that feedback.
Other miscellaneous thoughts:
- The proposed UA stylesheet has
option:filteredgivendisplay: none !important, but the!importantseems overly constraining. What if a developer wants to have filtered options grayed-out or crossed-off instead of disappeared (although devs would need to be careful to exlude such options from the a11y tree and from focus order)? It'd be good to ensure that animations between filtered and non-filtered states also work well. - The explainer mentions the
searchattribute a couple times in passing but it isn't really defined in this document. We assume this is referring to https://open-ui.org/components/combobox.explainer/#the-search-attribute -- if so it'd be good to link that directly, or inline an explanation into this explainer. - We assume
<select multiple>is in scope here since the GitHub label picker example is a multi-select. It would be good to have the explainer confirm this, and to ensure the accessibility implications with<select multiple>are also being considered (as was at least briefly discussed in https://github.com/w3c/aria/issues/2841). - For option A, is "sibling" a hard requirement or can the
<input>and<select>(and<selectedcontent>) be in different places in the DOM? It may be best not to be too strict on this requirement to allow for different DOM structures. For full composability, it could be desirable to have these be linkable across shadow DOM. Reference Target could forward thefilterID into a shadow root. Consider adding a corresponding reflecting IDL attribute likeinput.filterElement, which would allow the filter<input>to connect to a<select>in a parent shadow.- If Option A is selected, the attribute name
filtermay be worth bikeshedding. The current name sort of reverses the intended semantics:<input filter=foo>could be read like the thing with IDfoois the filter for the input, but what we want to express is the other way around where the<input>is the filter for the<select>foo.<input filters=foo>could work better since it reads like "this input filters the element with ID foo", but maybe thescould be confused for a pluralization. Maybefilterfor?
- If Option A is selected, the attribute name
Discussed
Oct 5, 2026 (See Github)
Dan: We posted and are waiting for a response.
OpenedAug 12, 2026
Explainer
https://open-ui.org/components/filterable-select.explainer/
The explainer
Where and by whom is the work is being done?
Feedback so far
You should also know that...
We still need to choose one of the API shape options, but the HTML parser changes in option B are opposed by developers and participants of OpenUI
<!-- Content below this is maintained by @w3c-tag-bot -->Track conversations at https://tag-github-bot.w3.org/gh/w3ctag/design-reviews/1264