How to Limit Invalid Styling to Invalid Inputs (on Submit)

[fabiangfd]

Hi,

I am using Formkit (v1.6.5) on a few large forms in my project.

Problem

On submit, if one input in my forms is invalid, all inputs are styled as invalid. How can I limit the invalid styling to the inputs, where validation fails? Any help is highly appreciated.

My Configuration

in my formkit.config.js, I am defining a theme using TailwindCSS classes. Here is the gist of it:

import { generateClasses } from "@formkit/themes";

// ...
const theme = {
   text: {
      input: "... formkit-invalid:bg-red-100 formkit-errors:bg-red-100"
      //...
   }
   //...
}

//...

export default {
    config: {
        classes: generateClasses(theme),
    },
    //...
};