React Hook Form

Form helpers that connect the Omni field primitives to React Hook Form— consistent IDs, error messaging, and accessibility baked in.

Access request form

Sign-in
Demonstrates `FormField`, `FormItem`, and the glass input styling combined with validation.

This address receives incident reports and rollout updates.

Keep this console signed in for quicker incident response.

Installation

pnpm dlx shadcn@latest add @omni/form

Usage

import { useForm } from "react-hook-form"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"

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

<Form {...form}>
  <form onSubmit={form.handleSubmit(console.log)}>
    <FormField
      control={form.control}
      name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input type="email" {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
    <Button type="submit">Submit</Button>
  </form>
</Form>