ui
GitHub

Form

A structured component for collecting and validating data.

Docs
form-demo.tsx
"use client"
 
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
 
import { Button } from "@/components/ui/button"
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
 
const schema = z.object({
	displayName: z
		.string()
		.min(3, { message: "Please enter at least 3 characters." }),
	email: z.string().email({ message: "Please enter a valid email address." }),
})
 
type FormValues = z.infer<typeof schema>
 
export function FormDemo() {
	const form = useForm<FormValues>({
		resolver: zodResolver(schema),
		defaultValues: {
			displayName: "",
			email: "",
		},
	})
 
	const onSubmit = (data: FormValues) => {
		console.log(data)
	}
 
	return (
		<Form {...form}>
			<form
				onSubmit={form.handleSubmit(onSubmit)}
				className="flex w-96 flex-col gap-4"
			>
				<FormField
					name="displayName"
					control={form.control}
					render={({ field }) => (
						<FormItem>
							<FormLabel>Display Name</FormLabel>
							<FormControl>
								<Input
									className="w-full"
									placeholder="borabalogluu"
									aria-invalid={!!form.formState.errors.displayName}
									{...field}
								/>
							</FormControl>
							<FormDescription>
								This is the name that will be displayed to other users.
							</FormDescription>
							<FormMessage />
						</FormItem>
					)}
				/>
				<FormField
					name="email"
					control={form.control}
					render={({ field }) => (
						<FormItem>
							<FormLabel>Email</FormLabel>
							<FormControl>
								<Input
									className="w-full"
									placeholder="your@email.com"
									aria-invalid={!!form.formState.errors.email}
									{...field}
								/>
							</FormControl>
							<FormDescription>Enter your email address</FormDescription>
							<FormMessage />
						</FormItem>
					)}
				/>
				<Button type="submit">Submit</Button>
			</form>
		</Form>
	)
}

About

9ui utilizes react-hook-form to build efficient, flexible, and scalable forms. React Hook Form is a lightweight library that optimizes performance by minimizing re-renders and simplifying form state management.

Why React Hook Form?

  • Performance: Uses uncontrolled components, reducing unnecessary re-renders.
  • Easy Integration: Works seamlessly with controlled and uncontrolled inputs.
  • Validation: Supports built-in validation and integrates with libraries like Zod.
  • Minimal Boilerplate: Reduces the amount of code needed to handle form state and validation.

Installation

npx shadcn@latest add https://9ui.dev/r/form.json

Usage

Imports
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form"
Anatomy
<Form {...form}>
	<form onSubmit={form.handleSubmit(onSubmit)}>
		<FormField
			name="..."
			control="{...}"
			render={() => (
				<FormItem>
					<FormLabel>Label</FormLabel>
					<FormControl>{/* Input, Select, etc. */}</FormControl>
					<FormDescription>Description</FormDescription>
					<FormMessage />
				</FormItem>
			)}
		/>
	</form>
</Form>