[feat] Add Forms Support

[dulranga]

Feature description

Overview

I would love to add Forms support to this library with the clean declarative approach inspired by Ant Design with the use of react-hook-form and Zod as the validation library.

Benefits

What the developer has to do is structure the form and give the zod schema, the <Form.Item> will handle all the validation internally, and onFinish only calls when the form is validated.

Proposed Structure

const AddNewUser = () => {
  const form = useForm({
    resolver: zodResolver(
      z.object({
        firstName: z.string().max(20),
        lastName: z.string().max(20).optional()
      })
    )
  })

  return (
    <Form form={form} onFinish={data => console.log(data)}>
      <div className='grid gap-x-10'>
        <Form.Item label='First Name' name='firstName'>
          <CustomTextField />
        </Form.Item>
        <Form.Item label='Last Name' name='lastName'>
          <CustomTextField />
        </Form.Item>
      </div>

      <Button type='submit'>Submit</Button>
    </Form>
  )
}

Affected component/components

All Input fields

Additional Context

No response

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues and PRs

[dulranga]

Since current input components return actual data as the first argument, this might need to be changed to work with react-form-hooks as it expects the onChange event

[devongovett]

I'd recommend taking a look at our forms guide in React Aria: https://react-spectrum.adobe.com/react-aria/forms.html. In many cases you don't even need react-hook-form or zod because the builtin validations are enough. There is a section about using those libraries, but I'd recommend starting simple and only adding them if needed. React Aria Components supports constraint validation, custom validation functions, server validation, etc. It's best to do zod-style validations on the server for security, and you can send the errors back to display via React Aria as well.

[dulranga]

I see. What do you think about DX? which way is easier to build complex forms?

Here are my thoughts about the way I proposed,

• it's less repetitive code to write
• all the validation is in one place
• typescript data schema comes as a bonus
• supports a wide variety of validators

The React Aria approach and shadcn/ui approach both do it well but its lot of repetitive codes in each input.

Let me know about your thoughts