Hacker News Reader

Comment by mastermedo | Hacker News Reader

The shadcn radio button in action: https://ui.shadcn.com/docs/components/radio-group

Protip: the space between the UI control and the label should be done using padding (or achieved via label nesting) so that the entire area is clickable.

    [ x ]   some long label
         ꜛꜛꜛ
         padding here, not margins or gaps

(clicking between the control and the label does nothing now)

Calling this a "Protip" is generous.

That the combined element has any surface area that doesn't toggle the radio setting is a straight-up bug.

It is laughable for a component this heavily refined to have such a basic usability flaw.

I'm thinking protip was sarcasm :)

Is this developed by these 10x developers I've heard about?

For some reason it's exceptionally slow for me on chromium. I click and I see it register half a second later. It also has no cursor:pointer which makes it look non-clickable. Is it expected or a bug?

Straight up doesn't even register clicks or keyboard focus for me in firefox.

Same in chrome on Android. They work if I switch to Base UI tab and back.

This interactivity definitely adds a wow effect.

Is it sarcastic or does it appear only on high frame rate devices? To me it simply feels like another radio button.

> Is it sarcastic or does it appear only on high frame rate devices? To me it simply feels like another radio button.

You're absolutely right!

Today I'm using a friends gaming computer. It's a 244hz monitor powered by a RTX 5070 TI and a screamingly fast AMD Ryzen 7 9800X3D CPU with 128GB of overclocked 6000MT/s RAM.

Not only does the radio look mundane for such overcomplicated component, but it also misses clicks where I would expect it to register. Like slightly above or below it.

For example, clicking where the pointer is in this image does NOT select the first radio button. It's not forgiving with regards to precision.

https://i.imgur.com/PNoCJeL.png

It also doesn't catch clicks between the label and the radio button.

I'm pretty sure it was a sarcastic comment.

On a recent MBP, it's indistinguishable from a vanilla radio button.

In a hilarious turn of fate, on iOS safari the first time one of the radio options is clicked after loading, the css focus style is applied, but a click is not always registered so the radio item ends up stuck in an invalid weird-looking state. I highly doubt the issue would occur if the built in radio were being used

Reply on news.ycombinator.com