The purpose of the Open UI group is to provide the web platform with UI controls that can be styled and extended by web developers. The
<selectmenu> element is one of the early browser implementations of the Open UI select specification.
<selectmenu> is available in Chromium-based browsers and requires a Canary version as well as the Experimental Web Platform features flag to be enabled in about:flags.
The demos below show how the
<selectmenu> UI control can be used to achieve what was once only possible with custom selects.
The control is still in its early days and these demos have been made to find bugs with the implementation and limitations in the architecture. They are not complete and have bugs.
Also note that some of the demos are not fully accessible. The experimental
<selectmenu> control allows to go very far in extending its default behavior. Some of the demos extend and even replace the entire shadow DOM of the control in order to push the prototype to its limits. As a result some demos are inaccessible. These are currently serving as a way to provoke discussions aimed at evolving the specification and implementation.
Create a rounded listbox, with inline options that are constrained within the circle.
Vertically align the popover so the selected option's vertical position matches that of the selected-value.
Note: this only works when the popover would normally appear below the button. The logic fails when the browser auto-places the popover above the button.
Add a input field to the popover that can be used to filter the options.
Allow selecting multiple options from the list, displaying them in the button.
Display more text within options, use a custom toggle button, and display an icon next to some options.
Limit the max-height of the popover and provide scrolling.
Display icons for some options, support inline and list layouts within the same select, display groups of options.
Note: optgroup's labels are not stylable yet, so the groups are done with divs.
Custom toggle button with animation, icons for options.
Mix a grid of colors and a list of action items. Display a split button (click the A to set the color, click the arrow to open the drop-down).