How to handle touched state for styling?

[bdrtsky]

Did found it in current docs. I've found some old mentions about data-conform-touched but I don't see it in my forms. How do you handle valid/invalid styling then? Does conform provide any help with it?

[edmundhung]

The data attribute is only available on v0. For v1, you can use the error or valid state of the field metadata to update the class name or data attribute as you preferred.

[bdrtsky]

Valid state apply class even when input wasn't touched yet. I did something close to what I want with this

valid={
              fields.airplane.errors
                ? false
                : fields.airplane.value
                  ? true
                  : undefined
            }

Need to check both errors and value. If value is empty, then input wasn't touched yet. Doesn't look super clean to be honest, so I decided to remove success state from input (also it feels like it's kinda redundant, indicating error state is enough, then just fall to regular input styling, too much color changes on input looks too much)

Still wonder maybe there's more appropriate way to do what I needed?

[edmundhung]

I think what you want is to not show any invalid style until the field is touched right?

The errors state Conform provided take into account the touched state. (i.e. A required field will have no errors initially even though the input is empty). That's why checking the errors state should be enough. But please correct me if I misunderstood your requirements :)

[bdrtsky]

Not exactly. I don't want to show "success" (green color) state, until input is touched and validated. That's why I am passing undefined in my example (when I don't want validation styles at all). It works like I want, but it's kinda verbose, since I am building a lib with Conform and input components, and want to abstract as much as possible for users. Basically I want something close to CSS :user-valid behaviour, but for Conform validity state

[bdrtsky]

BTW, the library is awesome, so glad I've tried it!!! Thank you so much!