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 `` 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> & DataAttributes; + /** + * Used to access the hidden `` element. + */ + inputRef?: Ref; /** * The label to be shown next to the checkbox. */ @@ -97,6 +103,7 @@ export const Checkbox = forwardRef( error, indeterminate, inputProps = {}, + inputRef: inputRefProp, label, name, onBlur, @@ -156,6 +163,7 @@ export const Checkbox = forwardRef( : undefined; const inputRef = useRef(null); + const handleInputRef = useForkRef(inputRefProp, inputRef); const handleChange: ChangeEventHandler = (event) => { // Workaround for https://github.com/facebook/react/issues/9023 @@ -217,7 +225,7 @@ export const Checkbox = forwardRef( onChange={handleChange} onFocus={onFocus} type="checkbox" - ref={inputRef} + ref={handleInputRef} {...restInputProps} /> > & DataAttributes; + /** + * Used to access the hidden `` element. + */ + inputRef?: Ref; /** * The label to be shown next to the radio icon */ @@ -88,6 +93,7 @@ export const RadioButton = forwardRef( disabled: disabledProp, error, inputProps = {}, + inputRef, label, name: nameProp, onFocus, @@ -196,6 +202,7 @@ export const RadioButton = forwardRef( onChange={handleChange} onFocus={onFocus} type="radio" + ref={inputRef} {...restInputProps} />