Accept tabIndex on Checkbox component (#3645)

This PR allows you to pass a `tabIndex` to the `Checkbox` component.
tailwindlabs · Feb 21, 2025 · 466bb07 · 466bb07
1 parent 87252e1
commit 466bb07
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bump `@tanstack/react-virtual` to be fix warnings in React 19 projects ([#3588](https://github.com/tailwindlabs/headlessui/pull/3588))
 - Fix `aria-invalid` attributes to have a valid `'true'` value ([#3639](https://github.com/tailwindlabs/headlessui/pull/3639))
 
+### Added
+
+- Accept `tabIndex` on `Checkbox` component ([#3645](https://github.com/tailwindlabs/headlessui/pull/3645))
+
 ## [2.2.0] - 2024-10-25
 
 ### Added

diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
@@ -51,7 +51,6 @@ type CheckboxPropsWeControl =
   | 'aria-disabled'
   | 'aria-labelledby'
   | 'role'
-  | 'tabIndex'
 
 export type CheckboxProps<
   TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG,
@@ -71,6 +70,7 @@ export type CheckboxProps<
     form?: string
     name?: string
     onChange?: (checked: boolean) => void
+    tabIndex?: number
   }
 >
 
@@ -92,6 +92,7 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
     value,
     form,
     indeterminate = false,
+    tabIndex = 0,
     ...theirProps
   } = props
 
@@ -148,7 +149,7 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
       'aria-describedby': describedBy,
       'aria-disabled': disabled ? true : undefined,
       indeterminate: indeterminate ? 'true' : undefined,
-      tabIndex: disabled ? undefined : 0,
+      tabIndex: disabled ? undefined : tabIndex,
       onKeyUp: disabled ? undefined : handleKeyUp,
       onKeyPress: disabled ? undefined : handleKeyPress,
       onClick: disabled ? undefined : handleClick,