Feedback Request: Automatic progressive HTML Attributes

[esamattis]

React Zorm v0.8.0 and later adds and experimental Progressive HTML Attribute helper:

import { unstable_inputProps as inputProps } from "react-zorm";

const FormSchema = z.object({
    username: z.string(),
});

// In a React Component...
<input {...zo.fields.username(inputProps)} />

// Output HTML 👇
<input required type="text" name="username" aria-invalid="true" />

This will infer the Zod Schema and will automatically add relevant HTML Input attributes such as name, type, validation attributes required, min, max etc. and accessibility attributes aria-invalid and aria-errormessage. Allowing part of the validation to be active even before Javascript is loaded when using SSR rendering.

You can try this out at
https://codesandbox.io/s/github/esamattis/react-zorm/tree/master/packages/codesandboxes/boxes/input-props?file=/src/App.tsx
Or in your app with the unstable import in v0.8.0 or later.

The implementation is here https://github.com/esamattis/react-zorm/blob/master/packages/react-zorm/src/input-props.ts

Some of this stuff can be bit opinionated so any feedback is appreciated. If you like this just as is you can also just 👍 this thread.