Building forms with React Hook Form and validation with Zod schema.
The Form is a copy-paste component in the Form Controls collection of Lightswind UI. Built with TypeScript, Tailwind CSS, and Framer Motion for clean developer experience and rapid UI building.
Add this import to your component file
1import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "@/components/lightswind/form"
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1// Basic usage with React Hook Form and Zod2import { z } from "zod"3import { useForm } from "react-hook-form"4import { zodResolver } from "@hookform/resolvers/zod"56const formSchema = z.object({7 username: z.string().min(2, {8 message: "Username must be at least 2 characters.",9 }),10 email: z.string().email({11 message: "Please enter a valid email.",12 })13})1415function ProfileForm() {16 const form = useForm<z.infer<typeof formSchema>>({17 resolver: zodResolver(formSchema),18 defaultValues: {19 username: "",20 email: ""21 },22 })2324 function onSubmit(values) {25 console.log(values)26 }2728 return (29 <Form {...form}>30 <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">31 <FormField32 control={form.control}33 name="username"34 render={({ field }) => (35 <FormItem>36 <FormLabel>Username</FormLabel>37 <FormControl>38 <Input placeholder="Enter username" {...field} />39 </FormControl>40 <FormDescription>41 This is your public display name.42 </FormDescription>43 <FormMessage />44 </FormItem>45 )}46 />47 <FormField48 control={form.control}49 name="email"50 render={({ field }) => (51 <FormItem>52 <FormLabel>Email</FormLabel>53 <FormControl>54 <Input placeholder="Enter email" {...field} />55 </FormControl>56 <FormMessage />57 </FormItem>58 )}59 />60 <Button type="submit">Submit</Button>61 </form>62 </Form>63 )64}
Different visual and behavioral variants of the component
Simple form with basic validation
Preview not available for this example.
A product byＭＵＨＩＬＡＮ and Team❤️.
