[Bug Report][3.1.4] Validation Errors on check boxes are wonky

[keithn]

Environment

Vuetify Version: 3.1.4 Vue Version: 3.3.0-alpha.4 Browsers: Edge 110.0.1587.41 OS: Windows 10

Steps to reproduce

this is just looking at the official documentation

https://vuetifyjs.com/en/components/forms/

Expected Behavior

the error message should be associated with the checkbox

Actual Behavior

error message looks associated with a button

Reproduction Link

https://jsfiddle.net/Lzk68jbt/

[keithn]

just having a look at vuetify, this kind of wonky stuff is always off putting because it feels like if you use the framework you are likely going to have to fight these things to make it look correct.

[lioneaglesolutions]

Not too sure where exactly the error message should be rendered.

The error messages in V2 were left-aligned fully but as per the MD3 spec, they have padding. No details in the spec about checkbox errors though.

If you apply the same padding (16px) as the text fields, it still doesn't look right. (example below)

@johnleider

[johnleider]

They are like this so that errors line up: