fix: add support for input props in radio and checkbox

chakra-ui · Mar 14, 2022 · 02be2bc · 02be2bc
1 parent 1221216
commit 02be2bc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git 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
@@ -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())