Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React warning when using aria-labelledby prop with <Checkbox> component #3569

Open
breadadams opened this issue Nov 21, 2024 · 1 comment
Open

Comments

@breadadams
Copy link

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.2.0

What browser are you using?

N/A

Reproduction URL

https://codesandbox.io/p/devbox/headlessui-aria-labelledby-warning-y9yjjy

Describe your issue

When providing an aria-labelledby prop to the <Checkbox> component it doesn't work, you have to use aria-labelledBy (uppercase B), which causes the following warning in the console:

image

We've also noticed that the aria-labelledby isn't autosuggested like other aria-* props are, for example aria-label.

Can confirm that the same occurs with at least the <Switch> component.

@breadadams
Copy link
Author

This appears to also be happening with other components such as Input, Radio.

Happy to help here if someone could point me in the right direction, tried finding the source but couldn't track down where the mapping is occurring.

cc @RobinMalfait

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant