feat(component): Form — Validation Wrapper

[bntvllnt]

Summary

Form wrapper integrating react-hook-form + zod for validated forms with accessible error messages. Present in shadcn/ui. Eliminates manual wiring for every form.

Proposed API

const schema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
})

<Form schema={schema} onSubmit={handleSubmit} defaultValues={{ email: "", name: "" }}>
  <FormField name="email">
    <FormLabel>Email</FormLabel>
    <FormControl>
      <Input placeholder="you@example.com" />
    </FormControl>
    <FormDescription>Your work email address</FormDescription>
    <FormMessage /> {/* auto-shows validation error */}
  </FormField>

  <FormField name="name">
    <FormLabel>Name</FormLabel>
    <FormControl>
      <Input />
    </FormControl>
    <FormMessage />
  </FormField>

  <Button type="submit">Submit</Button>
</Form>

Requirements

• Zod schema integration for validation
• react-hook-form under the hood
• FormField connects label + input + error via context
• FormMessage auto-renders validation errors
• FormDescription for help text
• Accessible: aria-describedby linking errors to inputs, aria-invalid
• Server-side error support (setError)
• Loading/submitting state
• Works with all existing form inputs (Input, Select, Checkbox, Switch, etc.)
• Compound component pattern

Technical Notes

• react-hook-form + @hookform/resolvers + zod as peer deps
• Context-based: FormField provides field state to children
• Follow shadcn/ui Form pattern closely

References

• shadcn/ui Form
• react-hook-form

[bntvllnt]

Implementation is active on branch feat/forms-family-batch-2 and tracked in PR #122: #122