Form Validation with shadcn/ui: A Practical Guide

Form validation is one of the most critical aspects of building user-friendly forms. Without proper validation, users can encounter frustrating errors, incomplete submissions, or worse—security vulnerabilities.

While form validation is essential, it can quickly become overwhelming with edge cases, dynamic rules, and multiple input types. Thankfully, 

 makes it easier to build forms with robust validation.

In this post, we’ll explore how to create a fully validated form using shadcn/ui and integrate it with libraries like 

Form validation poses several challenges:

We’ll build a login form with the following features:

Start by adding the required dependencies:

npm install @hookform/resolvers react-hook-form

import { Form, FormField, FormControl, FormLabel, FormMessage, Button, Checkbox } from "shadcn/ui";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

// Validation schema
const schema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(8, "Password must be at least 8 characters"),
  rememberMe: z.boolean().optional(),
});

type FormData = z.infer<typeof schema>;

export function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormData) => {
    console.log("Form Submitted:", data);
  };

  return (
    <Form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      {/* Email Field */}
      <FormField>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <input
            type="email"
            placeholder="Enter your email"
            {...register("email")}
            className={`border ${errors.email ? "border-red-500" : "border-gray-300"} rounded-md p-2 w-full`}
          />
        </FormControl>
        {errors.email && <FormMessage className="text-red-500">{errors.email.message}</FormMessage>}
      </FormField>

      {/* Password Field */}
      <FormField>
        <FormLabel>Password</FormLabel>
        <FormControl>
          <input
            type="password"
            placeholder="Enter your password"
            {...register("password")}
            className={`border ${errors.password ? "border-red-500" : "border-gray-300"} rounded-md p-2 w-full`}
          />
        </FormControl>
        {errors.password && <FormMessage className="text-red-500">{errors.password.message}</FormMessage>}
      </FormField>

      {/* Remember Me Checkbox */}
      <FormField>
        <FormLabel>
          <Checkbox {...register("rememberMe")} /> Remember Me
        </FormLabel>
      </FormField>

      {/* Submit Button */}
      <Button type="submit" className="bg-blue-500 text-white rounded-md px-4 py-2">
        Login
      </Button>
    </Form>
  );
}

Form validation doesn’t have to be a pain. By combining 

, you can build robust, user-friendly forms with minimal effort. Whether it’s a simple login form or a complex multi-step wizard, the principles covered here will set you up for success.

Want to dive deeper into building elegant forms and modern UIs? Enroll in our course 

Sleek Next.JS Applications with shadcn/ui

AUTHOR

Eyal Cohen

CONTRIBUTOR

Konstantin Kostov

Form validation is one of the most critical aspects of building user-friendly forms. Without proper validation, users can encounter frustrating errors, incomplete submissions, or worse—security vulnerabilities. While form validation is essential, it can quickly become overwhelming with edge cases,…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Form Validation with shadcn/ui: A Practical Guide

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript