← Back to release summary

Customizable select listbox

Category
DOM
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

Summary

This feature extends customizable select support to the listbox rendering mode, including single-select and multi-select in listbox mode. The listbox rendering mode means that the select element is rendered in-flow or in the page rather than with a separate button and popup. Listbox rendering mode is opted into across platforms via the multiple or size attributes, like <select multiple> or <select size=4>. When the appearance:base-select CSS property is applied to the select element with these attributes, it will now have improved rendering and input behavior. This feature does not support customizable select for the multi-select popup, which will come later. The following attributes must be set in order to get a multi-select popup: <select multiple size=1>.

Motivation

The previous iteration of customizable select, which has a picker popover built into it, had a restricted set of use cases because of the content model restrictions on what can be put inside of its picker. By adding a customizable listbox which is just the listbox without the picker, more complex patterns where the developer provides their own picker are enabled. This enables, for example, the labels picker on github which has a filtering text input before the listbox and a "edit lables" button after the listbox. Various component libraries on the web also include a "listbox" component which behaves like this. Multi-select is also a common feature for listboxes on the web which this feature supports.

Standards & signals

Explainers: https://github.com/whatwg/html/issues/11477

View on chromestatus.com