No Login Data Private Local Save

<selectlist> New HTML Element Demo - Online Rich Select

18
0
0
0
🌟 Experimental API

<selectlist> HTML Element

The <selectlist> is a proposed new HTML element from the Open UI Community Group, designed to replace the traditional <select> with fully styleable, rich dropdown components — supporting icons, descriptions, avatars, and more.

Rich Team Member Picker

Each option shows an avatar, name, and role — mimicking what <selectlist> enables natively.

👤
Select a team member Choose from the list
👑 Design Team
AK
Alice Kim
Senior Product Designer · SF
Design
MR
Marcus Rivera
UI/UX Designer · London
Design
💻 Engineering Team
SC
Sarah Chen
Staff Engineer · Berlin
Eng
DP
David Park
Frontend Lead · Toronto
Eng
EW
Emma Watson
Backend Developer · Sydney
Eng
📊 Management
JT
James Turner
Product Manager · New York
PM
Selected: none
selectlist concept: Options can include arbitrary HTML — avatars, badges, subtitles — impossible with native <select>.
Country & Region Picker

Rich country selector with flags, country codes, and regions — great for forms and checkout flows.

🌍
Select a country Choose your region
🇺🇸 Americas
🇺🇸
United States
USD · +1
NA
🇨🇦
Canada
CAD · +1
NA
🇧🇷
Brazil
BRL · +55
SA
🇪🇺 Europe
🇩🇪
Germany
EUR · +49
EU
🇫🇷
France
EUR · +33
EU
🌏 Asia Pacific
🇯🇵
Japan
JPY · +81
APAC
🇦🇺
Australia
AUD · +61
APAC
Selected: none
Pain point solved: Native <select> can't display flag emojis or rich metadata per option — <selectlist> solves this.
HTML Syntax Comparison

❌ Traditional <select> (limited)

<select>
  <option value="alice">Alice Kim</option>
  <option value="sarah">Sarah Chen</option>
</select>
<!-- No icons, descriptions, or rich content -->

✅ Proposed <selectlist> (rich)

<selectlist>
  <option>
    <img src="avatar.png">
    <strong>Alice Kim</strong>
    <small>Designer</small>
  </option>
  <option value="sarah">...</option>
</selectlist>

The <selectlist> element (previously called <selectmenu>) is being developed by Open UI — a W3C Community Group. It allows full CSS styling of every part of the dropdown, including the button, listbox, options, and optgroups — something impossible with native <select>.

Frequently Asked Questions

What is the <selectlist> element?

<selectlist> is a proposed new HTML element from the Open UI Community Group (a W3C group). It aims to replace the traditional <select> dropdown with a fully customizable, styleable component. Unlike native <select> — which is rendered by the OS and almost impossible to style consistently — <selectlist> would allow developers to insert any HTML content into options (icons, avatars, descriptions, badges) and style every sub-part with CSS.

Which browsers support <selectlist> today?

As of 2024-2025, no major browser has shipped <selectlist> in stable releases. It is currently an experimental proposal. Chrome has shown the most interest with an origin trial behind a flag (chrome://flags#enable-experimental-web-platform-features). The demo above uses a custom JavaScript implementation to simulate the same rich-select experience that <selectlist> would provide natively.

How is <selectlist> better than custom select libraries?

Custom select libraries (like Select2, Choices.js, or React Select) require JavaScript and often have accessibility gaps. A native <selectlist> would provide:

  • Built-in accessibility — ARIA roles, keyboard navigation, screen reader support out of the box.
  • No JS dependency — works with HTML alone (though JS can enhance it).
  • Smaller bundle size — no need for 20-50KB libraries just for a nice dropdown.
  • Form participation — natively works with <form>, FormData, and validation APIs.
What's the anatomy of a <selectlist>?

The proposed anatomy includes these named parts, each styleable via ::part() pseudo-elements:

  • button — the clickable trigger that opens the listbox.
  • listbox — the popup container holding all options.
  • optgroup — a group label for categorizing options.
  • option — individual selectable items (can contain rich HTML).
  • selected-value — displays the currently selected option in the closed state.
Can I use <selectlist> in production right now?

Not recommended for production yet. Since no browser has shipped it in a stable release, you should use a custom implementation (like the demos above) or a well-tested library (Select2, Choices.js, react-select) for rich select functionality. Keep an eye on the Open UI website and Chrome's origin trials for updates on <selectlist> availability.

What problem does <selectlist> solve?

The native <select> has been a major pain point for web developers for over 20 years:

  • Cannot style options — no CSS works inside <option> elements.
  • Inconsistent across OS/browsers — a select on macOS looks completely different from Windows or iOS.
  • No rich content — can't add images, icons, descriptions, or badges.
  • Limited to plain text — no HTML allowed inside options.
🔧 Related Tools