Docs
Form

Form

Form, form fields and validation with Zod and react-hook-forms.

API Reference

Installation

npm install @brudi/react-form

Usage

Create a form schema

Define the shape of your form using a Zod schema. You can read more about using Zod in the Zod documentation.

import * as z from "zod"
 
const formSchema = z.object({
  username: z.string().min(2).max(50),
})

Build your form

We can now use the <Form /> components to build our form.

import { Form, FormField, formResolver } from "@brudi/react-form"
import * as z from "zod"
 
import { Button } from "@brudi/react-button"
import { Input } from "@brudi/react-input"
 
const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
})
 
export function ProfileForm() {
  // ...
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
 
      <FormField.Input name="username" helpText="This is your public display name." />
      <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}
Dropdown MenuHover Card