1# shadcn/ui - Forms and Validation
2 
3## Installation
4 
5```bash
6npx shadcn@latest add form input textarea select checkbox
7npm install react-hook-form @hookform/resolvers zod
8```
9 
10## Basic Form with Zod Validation
11 
12```tsx
13"use client"
14 
15import { zodResolver } from "@hookform/resolvers/zod"
16import { useForm } from "react-hook-form"
17import * as z from "zod"
18import { Button } from "@/components/ui/button"
19import {
20  Form,
21  FormControl,
22  FormDescription,
23  FormField,
24  FormItem,
25  FormLabel,
26  FormMessage,
27} from "@/components/ui/form"
28import { Input } from "@/components/ui/input"
29 
30const formSchema = z.object({
31  username: z.string().min(2, { message: "Username must be at least 2 characters." }),
32  email: z.string().email({ message: "Please enter a valid email address." }),
33})
34 
35export function ProfileForm() {
36  const form = useForm<z.infer<typeof formSchema>>({
37    resolver: zodResolver(formSchema),
38    defaultValues: { username: "", email: "" },
39  })
40 
41  function onSubmit(values: z.infer<typeof formSchema>) {
42    console.log(values)
43  }
44 
45  return (
46    <Form {...form}>
47      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
48        <FormField
49          control={form.control}
50          name="username"
51          render={({ field }) => (
52            <FormItem>
53              <FormLabel>Username</FormLabel>
54              <FormControl>
55                <Input placeholder="shadcn" {...field} />
56              </FormControl>
57              <FormDescription>This is your public display name.</FormDescription>
58              <FormMessage />
59            </FormItem>
60          )}
61        />
62        <FormField
63          control={form.control}
64          name="email"
65          render={({ field }) => (
66            <FormItem>
67              <FormLabel>Email</FormLabel>
68              <FormControl>
69                <Input type="email" placeholder="[email protected]" {...field} />
70              </FormControl>
71              <FormMessage />
72            </FormItem>
73          )}
74        />
75        <Button type="submit">Submit</Button>
76      </form>
77    </Form>
78  )
79}
80```
81 
82## Advanced Form with Multiple Field Types
83 
84```tsx
85const formSchema = z.object({
86  username: z.string().min(2).max(50),
87  email: z.string().email(),
88  bio: z.string().max(160).min(4),
89  role: z.enum(["admin", "user", "guest"]),
90  notifications: z.boolean().default(false),
91})
92 
93export function AdvancedForm() {
94  const form = useForm<z.infer<typeof formSchema>>({
95    resolver: zodResolver(formSchema),
96    defaultValues: {
97      username: "",
98      email: "",
99      bio: "",
100      role: "user",
101      notifications: false,
102    },
103  })
104 
105  return (
106    <Form {...form}>
107      <form onSubmit={form.handleSubmit(console.log)} className="space-y-8">
108        {/* Text input */}
109        <FormField
110          control={form.control}
111          name="username"
112          render={({ field }) => (
113            <FormItem>
114              <FormLabel>Username</FormLabel>
115              <FormControl><Input placeholder="johndoe" {...field} /></FormControl>
116              <FormMessage />
117            </FormItem>
118          )}
119        />
120 
121        {/* Textarea */}
122        <FormField
123          control={form.control}
124          name="bio"
125          render={({ field }) => (
126            <FormItem>
127              <FormLabel>Bio</FormLabel>
128              <FormControl>
129                <Textarea placeholder="Tell us about yourself" className="resize-none" {...field} />
130              </FormControl>
131              <FormMessage />
132            </FormItem>
133          )}
134        />
135 
136        {/* Select */}
137        <FormField
138          control={form.control}
139          name="role"
140          render={({ field }) => (
141            <FormItem>
142              <FormLabel>Role</FormLabel>
143              <Select onValueChange={field.onChange} defaultValue={field.value}>
144                <FormControl>
145                  <SelectTrigger>
146                    <SelectValue placeholder="Select a role" />
147                  </SelectTrigger>
148                </FormControl>
149                <SelectContent>
150                  <SelectItem value="admin">Admin</SelectItem>
151                  <SelectItem value="user">User</SelectItem>
152                  <SelectItem value="guest">Guest</SelectItem>
153                </SelectContent>
154              </Select>
155              <FormMessage />
156            </FormItem>
157          )}
158        />
159 
160        {/* Checkbox */}
161        <FormField
162          control={form.control}
163          name="notifications"
164          render={({ field }) => (
165            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
166              <FormControl>
167                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
168              </FormControl>
169              <div className="space-y-1 leading-none">
170                <FormLabel>Email notifications</FormLabel>
171                <FormDescription>Receive emails about your account activity.</FormDescription>
172              </div>
173            </FormItem>
174          )}
175        />
176 
177        <Button type="submit">Submit</Button>
178      </form>
179    </Form>
180  )
181}
182```
183 
184## Login Form Pattern (Card + Form)
185 
186```tsx
187<Card className="w-[350px]">
188  <CardHeader>
189    <CardTitle>Login</CardTitle>
190    <CardDescription>Enter your credentials to continue</CardDescription>
191  </CardHeader>
192  <CardContent>
193    <Form {...form}>
194      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
195        <FormField
196          control={form.control}
197          name="email"
198          render={({ field }) => (
199            <FormItem>
200              <FormLabel>Email</FormLabel>
201              <FormControl>
202                <Input type="email" placeholder="[email protected]" {...field} />
203              </FormControl>
204              <FormMessage />
205            </FormItem>
206          )}
207        />
208        <FormField
209          control={form.control}
210          name="password"
211          render={({ field }) => (
212            <FormItem>
213              <FormLabel>Password</FormLabel>
214              <FormControl>
215                <Input type="password" {...field} />
216              </FormControl>
217              <FormMessage />
218            </FormItem>
219          )}
220        />
221        <Button type="submit" className="w-full">Login</Button>
222      </form>
223    </Form>
224  </CardContent>
225</Card>
226```
227 
228## Contact Form with API Submission
229 
230```tsx
231"use client"
232 
233import { zodResolver } from "@hookform/resolvers/zod"
234import { useForm } from "react-hook-form"
235import * as z from "zod"
236import { Button } from "@/components/ui/button"
237import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
238import { Input } from "@/components/ui/input"
239import { Textarea } from "@/components/ui/textarea"
240import { toast } from "@/components/ui/use-toast"
241 
242const formSchema = z.object({
243  name: z.string().min(2),
244  email: z.string().email(),
245  message: z.string().min(10),
246})
247 
248async function onSubmit(values: z.infer<typeof formSchema>) {
249  try {
250    const response = await fetch("/api/contact", {
251      method: "POST",
252      headers: { "Content-Type": "application/json" },
253      body: JSON.stringify(values),
254    })
255    if (!response.ok) throw new Error("Failed to submit")
256    toast({ title: "Success!", description: "Your message has been sent." })
257  } catch {
258    toast({ variant: "destructive", title: "Error", description: "Failed to send message." })
259  }
260}
261 
262export default function ContactPage() {
263  const form = useForm<z.infer<typeof formSchema>>({
264    resolver: zodResolver(formSchema),
265  })
266 
267  return (
268    <div className="container mx-auto max-w-2xl py-8">
269      <Form {...form}>
270        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
271          <FormField control={form.control} name="name"
272            render={({ field }) => (
273              <FormItem>
274                <FormLabel>Name</FormLabel>
275                <FormControl><Input placeholder="Your name" {...field} /></FormControl>
276                <FormMessage />
277              </FormItem>
278            )}
279          />
280          <FormField control={form.control} name="email"
281            render={({ field }) => (
282              <FormItem>
283                <FormLabel>Email</FormLabel>
284                <FormControl><Input type="email" placeholder="[email protected]" {...field} /></FormControl>
285                <FormMessage />
286              </FormItem>
287            )}
288          />
289          <FormField control={form.control} name="message"
290            render={({ field }) => (
291              <FormItem>
292                <FormLabel>Message</FormLabel>
293                <FormControl>
294                  <Textarea placeholder="Your message..." className="resize-none" {...field} />
295                </FormControl>
296                <FormMessage />
297              </FormItem>
298            )}
299          />
300          <Button type="submit" className="w-full">Send Message</Button>
301        </form>
302      </Form>
303    </div>
304  )
305}
306```
307 
308## Route Handler for Form Validation (API)
309 
310```ts
311// app/api/contact/route.ts
312import { NextRequest, NextResponse } from "next/server"
313import { z } from "zod"
314 
315const contactSchema = z.object({
316  name: z.string().min(2),
317  email: z.string().email(),
318  message: z.string().min(10),
319})
320 
321export async function POST(request: NextRequest) {
322  try {
323    const body = await request.json()
324    const validated = contactSchema.parse(body)
325    console.log("Form submission:", validated)
326    return NextResponse.json({ success: true })
327  } catch (error) {
328    if (error instanceof z.ZodError) {
329      return NextResponse.json({ errors: error.errors }, { status: 400 })
330    }
331    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
332  }
333}
334```
335