selectlist-elementet

selectlist exponerar knappen (utlösaren i stängt läge), listboxen (den öppna listrutan) och alternativen. Med CSS-pseudoelement (::part(button), ::part(listbox)) kan ni styla var och en utan att påverka det inbyggda beteendet.

Alternativ i selectlist kan innehålla godtyckligt innehåll — ikoner, beskrivningar och anpassade layouter — inte bara text. Webbläsaren hanterar fortfarande markeringslogik, tangentbordsnavigering och fokushantering, medan ni fritt styr utseendet.

selectlist behåller allt som <select> gör bra: tangentbordsnavigering (piltangenter och type-ahead), meddelanden till skärmläsare, deltagande i formulär och fokushantering. Ni ärver det tillgängliga beteendet och kan styla gränssnittet ovanpå det.

Tillhandahåll en slot för triggern: <button slot="button">Choose fruit <svg>...</svg></button>. Knappen kan utformas fritt — ersätt den inbyggda triangeln med en anpassad ikon, lägg till etiketter och ändra färger. Webbläsaren hanterar fortfarande öppning och stängning.

selectlist deltar i formulärinskickning precis som select: den har ett name-attribut, ett value och skickas med formuläret. Hanteringen på serversidan är identisk. På märkningsnivå är det en direkt ersättning för de flesta användningsfall med select.

selectlist är en funktion på ett tidigt utvecklingsstadium. År 2026 finns den i Chromium-baserade webbläsare bakom flaggor eller i begränsad form. Firefox och Safari har ännu inte stöd. Användning i produktion kräver fallback till ett vanligt <select> för webbläsare som saknar stöd.

Att skapa en polyfill för en fullt tillgänglig custom dropdown som matchar det inbyggda beteendet är svårt — fokusfällor, tangentbordsnavigering, integrering med skärmläsare och deltagande i formulär. Bibliotek som Downshift, Combobox och react-aria hanterar detta med tusentals rader kod. selectlist ersätter allt detta med ett enda element.

För interna appar eller distributioner som endast använder Chromium sparar selectlist redan i dag en betydande mängd kod. För publika webbplatser med bred målgrupp bör ni vänta tills Firefox och Safari har stöd, eller använda ett wrapperbibliotek som använder selectlist där det stöds och annars faller tillbaka på en anpassad React-/Vue-rullgardinsmeny.

När selectlist finns tillgängligt överallt kan ni räkna med att många bibliotek för anpassade rullgardinsmenyer antingen fasas ut eller blir tunna omslag runt det inbyggda elementet. Följ standardiseringsprocessen; API:t har genomgått ändringar och kan fortsätta att utvecklas innan standardiseringen är klar.

Designers kan nu specificera pixelperfekta rullgardinsmenyer utan reservationer av typen "Här är designen, men rullgardinsmenyn kommer att se annorlunda ut i webbläsaren". selectlist undanröjer en av de mest långvariga visuella skillnaderna mellan designskisser och den HTML som faktiskt levereras.