Checkbox's hidden input positions itself wrong

[mglavall]

Bug report

Current Behavior

The hidden input that renders with the radix checkbox positions itself to the side when they are wrapped in a flex container. There is a transform: translateX(-100%); that I guess it's intended to align it with the actual checkbox button but it does not work properly when wrapped with a flex.

Usually this is not much of a problem but it becomes a bigger issue when there is a scroll and a 100vh involved. Since it often breaks the scroll and creates bigger scrolling areas.

Expected behavior

I expect the input to position itself on top of the checkbox button.

Reproducible example

CodeSandbox Template

Suggested solution

I don't really know how to without adding an extra wrapper element.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	Checkbox	latest
React	n/a	any
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[jmunozz]

I have the same problem using shadcn/ui.
Somehow a checkbox in a Card list cause my layout to break (double scroll bar, whitespace at the bottom of the page).