From 02be2bcafea77b99d145cbabfef4a1b62530b59d Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Mon, 14 Mar 2022 23:00:12 +0400
Subject: [PATCH] fix: add support for input props in radio and checkbox

---
 packages/checkbox/src/checkbox.tsx | 10 +++++++++-
 packages/radio/src/radio.tsx       |  7 ++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/checkbox/src/checkbox.tsx b/packages/checkbox/src/checkbox.tsx
index cc2c697870b..5834e3146b6 100644
--- a/packages/checkbox/src/checkbox.tsx
+++ b/packages/checkbox/src/checkbox.tsx
@@ -72,6 +72,10 @@ export interface CheckboxProps
    * @default CheckboxIcon
    */
   icon?: React.ReactElement
+  /**
+   * Additional props to be forwarded to the `input` element
+   */
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
 }
 
 /**
@@ -100,6 +104,7 @@ export const Checkbox = forwardRef<CheckboxProps, "input">((props, ref) => {
     isChecked: isCheckedProp,
     isDisabled = group?.isDisabled,
     onChange: onChangeProp,
+    inputProps,
     ...rest
   } = ownProps
 
@@ -150,7 +155,10 @@ export const Checkbox = forwardRef<CheckboxProps, "input">((props, ref) => {
       className={cx("chakra-checkbox", className)}
       {...getRootProps()}
     >
-      <input className="chakra-checkbox__input" {...getInputProps({}, ref)} />
+      <input
+        className="chakra-checkbox__input"
+        {...getInputProps(inputProps, ref)}
+      />
       <CheckboxControl
         __css={styles.control}
         className="chakra-checkbox__control"
diff --git a/packages/radio/src/radio.tsx b/packages/radio/src/radio.tsx
index f0fa59cc849..7d3600ba6a6 100644
--- a/packages/radio/src/radio.tsx
+++ b/packages/radio/src/radio.tsx
@@ -35,6 +35,10 @@ export interface RadioProps
    * please use the props `maxWidth` or `width` to configure
    */
   isFullWidth?: boolean
+  /**
+   * Additional props to be forwarded to the `input` element
+   */
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
 }
 
 /**
@@ -57,6 +61,7 @@ export const Radio = forwardRef<RadioProps, "input">((props, ref) => {
     isFullWidth,
     isDisabled = group?.isDisabled,
     isFocusable = group?.isFocusable,
+    inputProps: htmlInputProps,
     ...rest
   } = ownProps
 
@@ -90,7 +95,7 @@ export const Radio = forwardRef<RadioProps, "input">((props, ref) => {
   const [layoutProps, otherProps] = split(htmlProps, layoutPropNames as any)
 
   const checkboxProps = getCheckboxProps(otherProps)
-  const inputProps = getInputProps({}, ref)
+  const inputProps = getInputProps(htmlInputProps, ref)
   const labelProps = getLabelProps()
   const rootProps = Object.assign({}, layoutProps, getRootProps())