selectlist-elementet

selectlist eksponerer knappen (udløseren i lukket tilstand), listboxen (den åbne rulleliste) og valgmulighederne. CSS-pseudoelementer (::part(button), ::part(listbox)) lader dig style hver del uden at påvirke den indbyggede adfærd.

Valgmuligheder i selectlist kan indeholde vilkårligt indhold — ikoner, beskrivelser og tilpassede layouts — ikke kun tekst. Browseren håndterer stadig valgslogik, tastaturnavigation og fokushåndtering, mens du frit styrer udseendet.

selectlist bevarer alt det, <select> gør godt: tastaturnavigation (piletaster og søgning ved at skrive), meddelelser til skærmlæsere, deltagelse i formularer og fokushåndtering. Du arver den tilgængelige adfærd og kan style brugergrænsefladen ovenpå.

Angiv en slot til udløseren: <button slot="button">Choose fruit <svg>...</svg></button>. Knappen er din at designe — erstat den indbyggede trekant med et tilpasset ikon, tilføj etiketter, og skift farver. Browseren håndterer stadig åbning og lukning.

selectlist deltager i formularafsendelse ligesom select: Den har en name-attribut og en value-værdi og sendes med formularen. Håndteringen på serversiden er identisk. Det er en direkte erstatning på markup-niveau i de fleste tilfælde, hvor select bruges.

selectlist er en funktion på et tidligt udviklingsstadie. I 2026 leveres den i Chromium-baserede browsere bag flag eller i begrænset form. Firefox og Safari understøtter den endnu ikke. Brug i produktion kræver en reserve med et almindeligt <select> til browsere uden understøttelse.

Det er svært at lave en fuldt tilgængelig tilpasset rulleliste, der matcher den indbyggede adfærd — fastholdelse af fokus, tastaturnavigation, integration med skærmlæsere og deltagelse i formularer. Biblioteker som Downshift, Combobox og react-aria udfører dette arbejde med tusindvis af kodelinjer. selectlist erstatter alt det med ét element.

Til interne apps eller udrulninger, der kun bruger Chromium, sparer selectlist betydelige mængder kode allerede i dag. Til offentlige websites med et bredt publikum bør du vente på understøttelse i Firefox og Safari eller bruge et wrapper-bibliotek, der anvender selectlist, hvor det understøttes, og ellers falder tilbage til en brugerdefineret React/Vue-rullemenu.

Når selectlist bliver tilgængeligt overalt, kan du forvente, at en lang række biblioteker til brugerdefinerede rullemenuer bliver udfaset eller reduceret til tynde indpakninger omkring det indbyggede element. Følg standardiseringsprocessen; API'et har gennemgået revisioner og kan fortsat udvikle sig, før den endelige standardisering.

Designere kan nu specificere pixelperfekte rullemenuer uden forbehold som "Her er designet, men rullemenuen kommer til at se anderledes ud i browseren". selectlist fjerner en af de ældste visuelle uoverensstemmelser mellem designskitser og den HTML, der leveres.