From efb37a09557aa66297552336bde6f497c4816c45 Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Thu, 23 Jan 2025 18:16:33 +0000
Subject: [PATCH] Add inputRef to Checkbox and RadioButton (#4612)

---
 .changeset/spotty-jeans-pump.md                |  5 +++++
 packages/core/src/checkbox/Checkbox.tsx        | 10 +++++++++-
 packages/core/src/radio-button/RadioButton.tsx |  7 +++++++
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/spotty-jeans-pump.md

diff --git a/.changeset/spotty-jeans-pump.md b/.changeset/spotty-jeans-pump.md
new file mode 100644
index 00000000000..06e5fddbb2a
--- /dev/null
+++ b/.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.
diff --git a/packages/core/src/checkbox/Checkbox.tsx b/packages/core/src/checkbox/Checkbox.tsx
index c8a34f52061..7b2bee26132 100644
--- a/packages/core/src/checkbox/Checkbox.tsx
+++ b/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
diff --git a/packages/core/src/radio-button/RadioButton.tsx b/packages/core/src/radio-button/RadioButton.tsx
index a0a3429e259..22c6c91dade 100644
--- a/packages/core/src/radio-button/RadioButton.tsx
+++ b/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