Hacker News new | ask | show | jobs
by jokull 1694 days ago
"Bring your own UI". You get the behavior from the library but they are completely unstyled or without the component layer where the styles live. Other libraries include Radix and HeadlessUI. Here's a presentation from one of the Radix library authors about how to build dropdowns in React, it serves as a good explainer about what goes into a headless UI library component. https://www.youtube.com/watch?v=lY-RQjWeweo
1 comments

Why not just use default html elements?
They’re pretty lacking. <select> is a great example: no searching/filtering, no ability to have styled/multiline text in <option>s, nor anything that’s not plain text (so no SVG iconography for example).

People constantly have to reinvent the wheel to offer fairly basic functionality, so it’s good that there are libraries to handle the behaviour and accessibility side well while supporting whatever visual styles you want to make.

I feel like a big problem here is that the Getting Started starts with a bunch of code that just... outputs a bare button. Starting with something like a combobox would show much more value.
Some common, but complex, UI components are hard to get right, especially when it comes to accessibility. Combo boxes in particular come to mind.
Yeah ComboBox is one of the most difficult. We wrote a post about the work that went into ours. https://react-spectrum.adobe.com/blog/building-a-combobox.ht...
There’s a lot of UI elements that are not in the set of html elements. Sometimes you need different behaviours.

I think it’s still best to build on the native elements first though.