Add inputRef to Checkbox and RadioButton (#4612)

.changeset/spotty-jeans-pump.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": minor
+---
+
+Add `inputRef` prop to `Checkbox` and `RadioButton`. The `inputRef` can be used to access the hidden `<input>` element.

packages/core/src/checkbox/Checkbox.tsx

@@ -6,6 +6,7 @@ import {
   type FocusEventHandler,
   type InputHTMLAttributes,
   type ReactNode,
+  type Ref,
   forwardRef,
   useRef,
 } from "react";
@@ -15,6 +16,7 @@ import type { DataAttributes } from "../types";
 import {
   makePrefixer,
   useControlled,
+  useForkRef,
   useIsomorphicLayoutEffect,
 } from "../utils";
 import { CheckboxIcon } from "./CheckboxIcon";
@@ -54,6 +56,10 @@ export interface CheckboxProps
    * Properties applied to the input element.
    */
   inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;
+  /**
+   * Used to access the hidden `<input>` element.
+   */
+  inputRef?: Ref<HTMLInputElement>;
   /**
    * The label to be shown next to the checkbox.
    */
@@ -97,6 +103,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
       error,
       indeterminate,
       inputProps = {},
+      inputRef: inputRefProp,
       label,
       name,
       onBlur,
@@ -156,6 +163,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
       : undefined;
 
     const inputRef = useRef<HTMLInputElement>(null);
+    const handleInputRef = useForkRef(inputRefProp, inputRef);
 
     const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
       // Workaround for https://github.com/facebook/react/issues/9023
@@ -217,7 +225,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
           onChange={handleChange}
           onFocus={onFocus}
           type="checkbox"
-          ref={inputRef}
+          ref={handleInputRef}
           {...restInputProps}
         />
         <CheckboxIcon

packages/core/src/radio-button/RadioButton.tsx

@@ -7,6 +7,7 @@ import {
   type FocusEventHandler,
   type InputHTMLAttributes,
   type ReactNode,
+  type Ref,
   forwardRef,
 } from "react";
 import { useFormFieldProps } from "../form-field-context";
@@ -42,6 +43,10 @@ export interface RadioButtonProps
    * Props to be passed to the radio input
    */
   inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;
+  /**
+   * Used to access the hidden `<input>` element.
+   */
+  inputRef?: Ref<HTMLInputElement>;
   /**
    * The label to be shown next to the radio icon
    */
@@ -88,6 +93,7 @@ export const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(
       disabled: disabledProp,
       error,
       inputProps = {},
+      inputRef,
       label,
       name: nameProp,
       onFocus,
@@ -196,6 +202,7 @@ export const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(
           onChange={handleChange}
           onFocus={onFocus}
           type="radio"
+          ref={inputRef}
           {...restInputProps}
         />
         <RadioButtonIcon