Comment by yen223
5 hours ago
This is the kind of stuff we have to do because almost all browser <input> elements are terrible in terms of customisability. Especially radios and selects
If you're one of those who think we should just use the default, bear in mind that the default radio button has poor usability for mobile users.
There are lots of ways to style these native controls, though, including ways to start from scratch and retain the accessibility affordances.
I'd be curious to know more about the usability issues you've found on mobile -- I've not had any personally when using radio buttons. I'll readily grant you that 'select' is awful everywhere though!
It’s a lot easier now than it used to be. Radio buttons used to be nearly impossible to style, and I still think they require scripting to de-select— so none in a group are selected after one has been selected. I’ll bet most of the complexity in the article is some combination of keeping support for older browsers, technical debt, and nobody complaining about it because it works.
> bear in mind that the default radio button has poor usability for mobile users
Wrap it in a label, give the label a padding. Boom!
The article explains how to style radio buttons with CSS however you want. What’s the problem with that?
It doesn’t.
It gives a very naive approach that doesn’t support any complex styling.
For that you need to wrap the input and additional styling elements in a ref’ed label.
Out of interest what's an example of styling that the radix/shadcn version enables that their approach doesn't? I was able to (AFAICT) replicate the radix docs example by just moving their styles around: https://codepen.io/mcintyre94/pen/pvbPVrP
1 reply →
Wrapping it in a label is the idiomatic and correct way, and should be done even when not styling. Perhaps especially when not styling.
Putting an adjacent label is also possible, but scales poorly due to needing unique ids.
Can you give an example please? What kind of complexity are we talking about?
1 reply →
But is that still less complex than what the author found?
The only <input> that is annoying to style is the “select” one because it’s hard to style the “options”. The rest seem reasonable and quite customizable in my experience.
And even select is fully customisable now if you're targeting modern browsers
The date picker still sucks.
I admit I haven’t had to use the date picker in a long time but I looked at the MDN for an example of the default implementation of it and it seemed fine on my iPhone. What issues have you encountered with it? I imagine it’s a different story on desktop browsers.
Not on mobile. Most internet access these days is mobile.