What component (if applicable)
Describe the bug
The CheckboxField component claims to automatically associate a Label and Checkbox using a generated ID. While an ID is indeed generated and applied to both components, the Checkbox renders as a <span> element rather than a labelable form control. Since <span> is not a labelable HTML element, the association is invalid and results in a browser accessibility error: “Incorrect use of ”. This breaks native label–control semantics and accessibility expectations.
To Reproduce
Steps to reproduce the behavior:
- Go to your demo site -> settings
- Check Chrome DevTools -> Issues tab
Expected behavior
The Checkbox component should render as, or be able to render as, a labelable HTML element so that the generated id / for association is valid. At a minimum, the component should support an as prop to allow consumers to choose a labelable element (e.g., input or button). If a custom element is required, it is expected that styling may be lost, but correct semantics and accessibility should remain achievable.
Screenshots
Not applicable.
Browser/Device (if applicable)
- OS: macOS Sequoia 15.6.1
- Browser Chrome
- Version 143.0.7499.193
Additional context
Currently, Tailwind UI Kit has removed the ability to change the rendered element via an as prop, leaving no workaround for this issue. A possible solution would be to render the Checkbox as a <button> by default instead of a <span>, since <button> is a labelable element per HTML specifications. This would preserve accessibility while maintaining flexibility in styling and behavior.
What component (if applicable)
Describe the bug
The CheckboxField component claims to automatically associate a Label and Checkbox using a generated ID. While an ID is indeed generated and applied to both components, the Checkbox renders as a
<span>element rather than a labelable form control. Since<span>is not a labelable HTML element, the association is invalid and results in a browser accessibility error: “Incorrect use of ”. This breaks native label–control semantics and accessibility expectations.To Reproduce
Steps to reproduce the behavior:
Expected behavior
The Checkbox component should render as, or be able to render as, a labelable HTML element so that the generated id / for association is valid. At a minimum, the component should support an as prop to allow consumers to choose a labelable element (e.g., input or button). If a custom element is required, it is expected that styling may be lost, but correct semantics and accessibility should remain achievable.
Screenshots
Not applicable.
Browser/Device (if applicable)
Additional context
Currently, Tailwind UI Kit has removed the ability to change the rendered element via an as prop, leaving no workaround for this issue. A possible solution would be to render the Checkbox as a
<button>by default instead of a<span>, since<button>is a labelable element per HTML specifications. This would preserve accessibility while maintaining flexibility in styling and behavior.