[Bug]: Native Checkbox validation errors are misaligned

[brunnerh]

Package

carbon-components-react

Browser

Chrome, Firefox, Edge

Package version

v7.47.0

Description

When adding native validation errors to the checkbox, the generated notification will be misaligned because the real checkbox element is not where the visual checkbox is.

Before submit:

After submit:

Chrome/Edge

Firefox

---

Related issue for custom validation errors: #5390

Even if this is implemented, it would be nice if native validation were still supported.

CodeSandbox example

https://codesandbox.io/s/carbon-checkbox-validity-mw4vo

Steps to reproduce

• Add Checkbox component
• Use setCustomValidity and reportValidity on underlying input element

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[brunnerh]

I just did some testing and apparently Safari (which I had no access to at the time) aligns the message at the top. So for this to work properly in all major browsers, the underlying <input> should probably fill the same bounding box as the visible checkbox.

This can also happen in other browsers, e.g. Chrome, if there is not enough space below the input.

[brunnerh]

@jnm2377 Could this be re-opened to address alignment of validation messages that appear above the input? (See previous comment)

[tw15egan]

Based on #15435 (comment), we still need to fix this issue with Checkbox. @riddhybansal, do you want to tackle that one as well?