Form

Building forms with React Hook Form and Zod validation.

shadcn/ui docs →

Preview

This is your public display name.

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/form.json

Dependencies: @radix-ui/react-label@radix-ui/react-slotreact-hook-form

Usage

example.tsx
import { useForm } from "react-hook-form"
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const form = useForm({ defaultValues: { username: "" } })

<Form {...form}>
  <form onSubmit={form.handleSubmit((data) => console.log(data))}>
    <FormField
      control={form.control}
      name="username"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Username</FormLabel>
          <FormControl>
            <Input placeholder="shadcn" {...field} />
          </FormControl>
          <FormDescription>Your public display name.</FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />
    <Button type="submit">Submit</Button>
  </form>
</Form>
0