I’ve been telling all the Figma designers that it’s now time to start designing in the browser. Design tools have fallen behind. I love design tools, but I now design in the browser 90% of the time.
Hopefully these still respond to keyboard control the same way the traditional select element does. I'll be very glad to see this in practice if that is the case (I would be surprised if it wasn't), because there is nothing more annoying to me than a reimplementation of a standard form element that looks pretty, but just makes filling out a form harder than it would be otherwise.
Other inputs inside the select - you can, I tried it with a checkbox called "Mega Party Mode" and it still submits properly with both inputs. If you are just using it for the fact that it's a dropdown, you might be better off just using the new popover + anchor APIs - which is what this is built on. Videos/Audio - yes absolutely
Honestly, they should update the default select multiple to use check boxes. It's crazy one has to use a component library because the native multiple select is so bad.
Damn! Amazing. I always felt that select has some limitations and developers ahould be allowed to add their custom css to it! Please do an update when it launches on all browsers
I've been waiting for this even since I learned about the selectmenu element. And best of all, I guess it should be accessible by default. I mean just a bunch of JS won't be required no more to build custom select elements, which is always a win. Unfortunately I'll have to wait for 2-3 more years before I can start using it. And no, the default select fallback just doesn't work for projects I'm working on.
@qedro yeah true, but I'm already using 3rd party libraries for those. I'm just happy at some point in the future I'll be able to ditch them and use a native feature instead.
Is there some easy way to turn this into a typeahead (so user could type something and I could load the options async) or would that be the job for a text input and the new CSS anchoring?
From talking to the spec authors, the type + filtering use case you are describing will come in a future "Combobox" Spec. You could pretty easily add a bit of JS onto this primitive and get one though!
Hey Wes! Do you know how to tell Vite that it's okay to find a button inside of a select element? warning: cannot be child of , according to HTML specifications...
I am sorry, I'm using latest Chrome (on a Mac) but it doesn't work. Am I missing anything? Please help! It just show a normal dropdown. I turned on the Experimental Web Platform features too.
Annoys me that they didn't use kebab-casing for 'selectedoption'. This is the first two-word HTML element, isn't it? Why not use ? I'm sure other future element updates could make use of that new name as well.
It certainly wasn't the biggest problem known to CSS developers. But I would say this update does a lot for accessibility, since custom solutions would often mess up operation with keyboard, and also not work well with screen readers.
This is pretty useful but also something that could be abused. I can already imagine an overzealous designer asking if select-inside-select is possible to make some unholy nested menu kluge. Which also makes me wonder how the accessibility will be on selects styled like this; How well will they behave with keyboard and limited-vision tools?
Someone already asked - you can’t nest them thankfully. The benefit here is that accessibility is built into browser primitives, way better than building your own and letting accessibility slip
It's cool, but barely usable at the moment. Regular users will never mess up with the experiments flags inside browsers. Good to know it will come some day and maybe it will be supported by more browsers than just Chrome.
only took about 20 years but we got there, yay!
good job on whoever was working on this proposal, decision to keep it select is truly great one.
Fantastic news! _Please_ do an updated video when support is there. Especially Firefox, my tried and true; today, more than ever.
Awesome! Really good rundown! Thx wes!
thanks a ton! Glad you enjoyed
I can already see some cool thing I can make with this.
You scared me at the end haha, I am already subscribed sirrr!
I normally don't care for video demos of tech stuff like this, but this was a good one. Thanks
dan I was just watching a video on css scroll driven animation and now this custom select elements. is crazy how html and css are evolving 🎉🎉
I’ve been telling all the Figma designers that it’s now time to start designing in the browser. Design tools have fallen behind. I love design tools, but I now design in the browser 90% of the time.
As always amazing content wes ❤
This is a pleasant surprise. I fully expected net positive stable nuclear fusion before a customizable select.
Yes this is definitely going to be handy for us going forward 💯
4:31 Wes Bos jumpscare
So scary that I accidentally subscribed 👻
Hopefully these still respond to keyboard control the same way the traditional select element does. I'll be very glad to see this in practice if that is the case (I would be surprised if it wasn't), because there is nothing more annoying to me than a reimplementation of a standard form element that looks pretty, but just makes filling out a form harder than it would be otherwise.
So, can we add a text input or radio button inside this dropdown? What about audio/video tags?
Other inputs inside the select - you can, I tried it with a checkbox called "Mega Party Mode" and it still submits properly with both inputs. If you are just using it for the fact that it's a dropdown, you might be better off just using the new popover + anchor APIs - which is what this is built on.
Videos/Audio - yes absolutely
@@WesBos thanks! No, I'm just curious. Now we can put a dropdown inside a dropdown, inside of a dropdown :-D
@@ReiZru OH man. I tried it. It pukes them up to be siblings. So thankfully, no.
This is INSANE
Finally! Hope that it also quickly finds its way to Tailwind.
That was a jumpscare for me at the end! 🫢
🫨 I timestamped it at least?
Honestly, they should update the default select multiple to use check boxes. It's crazy one has to use a component library because the native multiple select is so bad.
Woooh this is awesome news! 👏🏾👏🏾👏🏾
Damn! Amazing. I always felt that select has some limitations and developers ahould be allowed to add their custom css to it! Please do an update when it launches on all browsers
Great news! I hope things like this will eventually make low-level UI component libraries obsolete (as much as I love Radix).
I think we will still have them but they get a lot smaller
Not gonna lie, stylable dropdowns are wilder than o1
No Kidding
I've been waiting for this even since I learned about the selectmenu element. And best of all, I guess it should be accessible by default. I mean just a bunch of JS won't be required no more to build custom select elements, which is always a win.
Unfortunately I'll have to wait for 2-3 more years before I can start using it. And no, the default select fallback just doesn't work for projects I'm working on.
3 years is enough to make your own custom select 😂
@qedro yeah true, but I'm already using 3rd party libraries for those. I'm just happy at some point in the future I'll be able to ditch them and use a native feature instead.
Hmm does this support nested dropdowns? I'm thinking of whether this could completely replace custom dropdowns in things like right-click menus. 🤔
20 years! yea 20!
Is it animatable with discrete animations?
Yep! Thats the beauty of all these new parts of HTML + CSS - very easy to control with CSS and that include animating from a display:none; start
Is there some easy way to turn this into a typeahead (so user could type something and I could load the options async) or would that be the job for a text input and the new CSS anchoring?
From talking to the spec authors, the type + filtering use case you are describing will come in a future "Combobox" Spec. You could pretty easily add a bit of JS onto this primitive and get one though!
Is this what the spec for selectlist turned into ?
Looks like it didn't go stage-3 just yet, but hopefully on the next meeting it will.
Hey Wes! Do you know how to tell Vite that it's okay to find a button inside of a select element?
warning: cannot be child of , according to HTML specifications...
This is probably a linting error - you’ll need to adjust your ESLint to allow it to
Cooooooool stuff
2010 me would be so happy right now.
I am sorry, I'm using latest Chrome (on a Mac) but it doesn't work. Am I missing anything? Please help! It just show a normal dropdown. I turned on the Experimental Web Platform features too.
Same here. Works in Edge on the Mac; partly works in Chrome Canary but the styling is all messed up
Thanks god, using ul li element create custom select always feels so wrong 😅
i am assuming this won't have native controls on mobile
Weren't we supposed to get a complete new select element?
This one surprises me really.
Is a part on this new html feature?
Yep!
Annoys me that they didn't use kebab-casing for 'selectedoption'. This is the first two-word HTML element, isn't it? Why not use ? I'm sure other future element updates could make use of that new name as well.
Slot is already used by web components, so if you used this in a web component, they would conflict. is two words but it doesn’t feel as weird as this
I felt compelled to subscribe...I don't know why.
So this is essentially a nestable select? This would be an even more mega win if it could be dynamically populated, too.
Thank you!! 🙌🏾
It certainly wasn't the biggest problem known to CSS developers. But I would say this update does a lot for accessibility, since custom solutions would often mess up operation with keyboard, and also not work well with screen readers.
I was thinking on similar lines, sure it will help with accessibility that too without messing up the keyboard operation
This is pretty useful but also something that could be abused. I can already imagine an overzealous designer asking if select-inside-select is possible to make some unholy nested menu kluge. Which also makes me wonder how the accessibility will be on selects styled like this; How well will they behave with keyboard and limited-vision tools?
Someone already asked - you can’t nest them thankfully. The benefit here is that accessibility is built into browser primitives, way better than building your own and letting accessibility slip
Your SUBSCRIBE! made me smash that button terrifyingly!
Hahah goood!
Using this today!
SWEEET!
Aaah, that's neat!!
Nice, it will work on Safari in 2048
Surely multiple can’t have a fallback can it?!
Multiple is a standard for select as well - though checkboxes are a more common UI pattern
@ I done learned me two things today. Thanks!
NOICE
It's cool, but barely usable at the moment. Regular users will never mess up with the experiments flags inside browsers. Good to know it will come some day and maybe it will be supported by more browsers than just Chrome.
watch the first 4 seconds of the video again
alright alright I subscribed 😅
🎉
SUBSCRIBE!!!!!
Ahh, yes, just like the height 0 to auto, they just took a long time.
This is huge... Selects have been really annoying to deal with
Wake me up when it's in Safari. Until then, I don't care.
I have set a reminder for you Ss-zg3yj 🥰
HTML CSS 💩💩
Awesome!!!! waited too long for this features!!! 🥹🥹🥹