Form

Collect user inputs and validate them in structured fields

Source Code

Installation

zod and react-hook-form are used together for simple, type-safe validation.

zod defines the schema and rules, while react-hook-form applies them in real time, reducing boilerplate and keeping forms consistent and easy to maintain.


pnpm dlx radianui@latest add form

Usage

These components are also integrated with form for validation and state management.

Imports

/components/ui/form.tsx

import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form"

Code

/components/ui/form.tsx

<Form>
	<FormField
		render={({ field }) => (
			<FormItem>
				<FormLabel>Email</FormLabel>
				<FormControl>
					<Input placeholder="Email address" {...field} />
				</FormControl>
				<FormDescription>Enter your email</FormDescription>
				<FormMessage />
			</FormItem>
		)}
	/>
</Form>