The Checkbox component has two related structural problems that need fixing as per #1714. This issue is the plan and instructions to fix these.
1. Native <input> in normal flow inflates wrapper height
The mock checkbox wrapper (div.juno-checkbox) is relative w-4 h-4, and the SVG checkmark and indeterminate bar are both absolute — but the native <input> is in normal flow. Browser inputs carry inline-block rendering and implicit line-height that pushes the wrapper's height beyond the intended 1rem, causing the checkbox to appear visually shifted upward when placed alongside other items-center flex siblings.
Fix: add absolute inset-0 to the input's styles and remove the now-redundant w-4 h-4 from them, making the input a zero-layout-cost full overlay on the mock.
2. ...props spreads onto a decorative div, not the <input>
CheckboxProps extends HTMLAttributes<HTMLDivElement> and ...props is spread onto div.juno-checkbox. Attributes like aria-label, aria-describedby, data-testid etc. therefore land on a decorative element rather than the native input — incorrect semantically and broken for accessibility tooling.
Fix: change CheckboxProps to extend InputHTMLAttributes<HTMLInputElement> and route ...props including className to the native <input>. Introduce a new wrapperClassName prop for callers who need to style the outer container element, following the established pattern in this library (TextInput, Switch, Select, Textarea, ComboBox, etc.).
Acceptance criteria
The Checkbox component has two related structural problems that need fixing as per #1714. This issue is the plan and instructions to fix these.
1. Native
<input>in normal flow inflates wrapper heightThe mock checkbox wrapper (
div.juno-checkbox) isrelative w-4 h-4, and the SVG checkmark and indeterminate bar are bothabsolute— but the native<input>is in normal flow. Browser inputs carryinline-blockrendering and implicit line-height that pushes the wrapper's height beyond the intended1rem, causing the checkbox to appear visually shifted upward when placed alongside otheritems-centerflex siblings.Fix: add
absolute inset-0to the input's styles and remove the now-redundantw-4 h-4from them, making the input a zero-layout-cost full overlay on the mock.2.
...propsspreads onto a decorativediv, not the<input>CheckboxPropsextendsHTMLAttributes<HTMLDivElement>and...propsis spread ontodiv.juno-checkbox. Attributes likearia-label,aria-describedby,data-testidetc. therefore land on a decorative element rather than the nativeinput— incorrect semantically and broken for accessibility tooling.Fix: change
CheckboxPropsto extendInputHTMLAttributes<HTMLInputElement>and route...propsincludingclassNameto the native<input>. Introduce a newwrapperClassNameprop for callers who need to style the outer container element, following the established pattern in this library (TextInput,Switch,Select,Textarea,ComboBox, etc.).Acceptance criteria
<Checkbox>placed in anitems-centerflex container is vertically centered correctly<Checkbox>inside a<CheckboxGroup>renders with consistent spacing in the vertical stack (no regression)CheckboxGrouprenders and functions correctly with no regressionsaria-*,data-*and other HTML attributes passed to<Checkbox>are forwarded to the native<input>classNameis forwarded to the native<input>wrapperClassNameprop is accepted and applied to the outer container, consistent with other components in the librarywrapperClassName