Building React Forms with Ease Using React Hook Form, Zod and Shadcn

Forms are something every developer encounters, whether as a user or on the developer side. They’re essential on most websites, but their complexity can vary wildly—from simple 3-field contact forms to giga-monster-t-rex, multi-page forms with 150 fields, dynamic validation, and asynchronous checks.

In this post, we’ll explore how React Hook Form, Zod, and Shadcn can be used to create an adaptable, developer-friendly solution that handles a wide range of form requirements with ease.

Meet the tools

Let’s look at the stack we’ll use to build and manage our forms.

React and Wasp

• Framework:
  
  
  

  with TypeScript, called todo-ts. This template comes with ready-made components and routing for authentication, including login and signup screens. It also offers a solid example of how CRUD operations work in Wasp, ideal if you’re new to the framework. Additionally, we’ll leverage the new Wasp TypeScript SDK to manage our configuration, as it provides extended flexibility for customization.

  
  
  

  
  
  
  Finding this article useful?
  

  
  
  

  (for contributions, or to simply test the product). Click on the button below to give Wasp a star and show your support!

  
  
  

  
  

  
  
  

  
  
  
  Putting it all together - Zod schema + React Hook Form instance + layout
  

  
  
  

  To work with forms, we’ll start by defining a Zod validation schema. Our form has three data types: strings, a date, and a boolean. We’ll apply validation to most fields: name and surname are required, while email utilises the built-in e-mail validation. Zod simplifies validating common string types with built-in validations for different types, like emails, URLs, and UUIDs, which is helpful for our email field.

  
  
  

  For additional validations, the date can’t be set to a future date, and the premiumUser field simply needs to be a boolean. Zod also provides default validation error messages, but these can be customized. For example, instead of name: z.string().min(1), we could specify name: z.string().min(1, 'Name is required').
  
  

  
  
  
  
  

  CODE Kopieren

    const formSchema = z.object({
  
      name: z.string().min(1, { message: 'Name is required' }),
  
      surname: z.string().min(1, { message: 'Surname is required' }),
  
      email: z.string().email({ message: 'Invalid email address' }),
  
      dateOfBirth: z
  
        .date()
  
        .max(new Date(), { message: 'Date cannot be in the future' }),
  
      premiumUser: z.boolean(),
  
    });
  
  

  
  
  
  
  
  
  
  

  Our form is managed by the useForm hook from
  
  

  
  
  
  
  

  CODE Kopieren

  
  
  // Defining form schema
  
  const formSchema = z.object({   
  
      dateOfBirth: z.date().max(new Date(), {
  
        message: 'Date of birth cannot be today, or in the future',
  
      }),    
  
  });
  
  
  
  // Defining form  
  
  const form = useForm<FormData>({
  
      resolver: zodResolver(formSchema),
  
      defaultValues: defaultValues,
  
  });
  
  
  
   // Creating form control
  
    <FormField
  
    control={form.control}
  
    name="dateOfBirth"
  
    render={({ field }) => (
  
      <FormItem className="flex flex-col">
  
        <FormLabel>Date of birth</FormLabel>
  
        <FormControl>
  
          <DatePicker date={field.value} setDate={field.onChange} />
  
        </FormControl>
  
        <FormMessage />
  
      </FormItem>
  
    )}
  
  />
  
  

  
  
  
  
  
  
  
  

  If you’re curious to see the completed application, check out the GitHub repository here: on GitHub if you liked this post! Your support helps us continue making web development easier and smoother for everyone. 🐝

  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen