Prevent focus on <Checkbox /> when it is disabled (#3251)

* prevent focus on `<Checkbox />` when disabled * update changelog
tailwindlabs · May 28, 2024 · b3a508b · b3a508b
1 parent 94bc4e1
commit b3a508b
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Keep `<Combobox />` open when clicking scrollbar in `<ComboboxOptions>` ([#3249](https://github.com/tailwindlabs/headlessui/pull/3249))
 - Merge incoming `style` prop on `ComboboxOptions`, `ListboxOptions`, `MenuItems`, and `PopoverPanel` components ([#3250](https://github.com/tailwindlabs/headlessui/pull/3250))
+- Prevent focus on `<Checkbox />` when it is `disabled` ([#3251](https://github.com/tailwindlabs/headlessui/pull/3251))
 
 ## [2.0.4] - 2024-05-25
 

diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
@@ -148,7 +148,7 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
       'aria-describedby': describedBy,
       'aria-disabled': disabled ? true : undefined,
       indeterminate: indeterminate ? 'true' : undefined,
-      tabIndex: 0,
+      tabIndex: disabled ? undefined : 0,
       onKeyUp: disabled ? undefined : handleKeyUp,
       onKeyPress: disabled ? undefined : handleKeyPress,
       onClick: disabled ? undefined : handleClick,