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 } /** @@ -100,6 +104,7 @@ export const Checkbox = forwardRef((props, ref) => { isChecked: isCheckedProp, isDisabled = group?.isDisabled, onChange: onChangeProp, + inputProps, ...rest } = ownProps @@ -150,7 +155,10 @@ export const Checkbox = forwardRef((props, ref) => { className={cx("chakra-checkbox", className)} {...getRootProps()} > - + } /** @@ -57,6 +61,7 @@ export const Radio = forwardRef((props, ref) => { isFullWidth, isDisabled = group?.isDisabled, isFocusable = group?.isFocusable, + inputProps: htmlInputProps, ...rest } = ownProps @@ -90,7 +95,7 @@ export const Radio = forwardRef((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())