Customizable select falls back gracefully to the native <select> in unsupported browsers — as long as your options still have text. Replace labels with swatches and icons, and those users see a dropdown full of empty options.
We show you what we mean here:
Every year the web gets a little bit better, and a little more customizable, and I love it so much 😭
The hardest part of getting started with MapKit JS used to be authentication — private keys, self-signing, token rotation.
v6 cuts all of that.
Generate a static token from the Apple Developer website, scope it to your domain, and you're
done.
Much easier 😅
Icon-only options in a customizable <select> break three things:
❌️ users who don't recognize the icon have no help
❌️screen readers have nothing to announce
❌️browsers w/o support show an empty dropdown
There's just 1 fix for all three cases: keep the text
Learn more:
Quiz time! We published six videos on web technology for WWDC26 this year.
Which do you think got the most views?
A. Grid Lanes
B. Web Extensions
C. Model Element
D. What's new in Safari 27
E. Immersive Web Environments
F. Customizable Select
MapKit JS 6 ships as an npm package 🥳
✅ npm install @apple/mapkit-loader
✅ import the loader
✅ pass your token
✅ and you're on the map.
TypeScript support included via DefinitelyTyped.
If you tried MapKit JS a few years ago and moved on, v6 is worth another look 👀
Customizable select is so powerful -- it's fully style-able with custom arrows, icons, color swatches, rich option layouts.
But to make sure everyone can enjoy it, there’s one rule to follow: always include text in your options.
We show you why this rule is so important: webkit.org/blog/18117/t...
