Accept tabIndex on Checkbox component (#3645)
This PR allows you to pass a `tabIndex` to the `Checkbox` component.
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user