Accept tabIndex on Checkbox component (#3645)

This PR allows you to pass a `tabIndex` to the `Checkbox` component.
This commit is contained in:
Robin Malfait
2025-02-21 15:54:31 +01:00
committed by GitHub
parent 87252e1c33
commit 466bb07ba6
2 changed files with 7 additions and 2 deletions
+4
View File
@@ -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
@@ -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,