Components

Form

A form component with validation using react-hook-form.

example.tsx

Import

tsx

import {
  AppForm,
  AppFormField,
  AppFormItem,
  AppFormLabel,
  AppFormControl,
  AppFormMessage,
  AppFormDescription,
} from "@/components/primitives/AppForm"

API Reference

AppForm extends all native <form> HTML attributes.

Prop	Type	Default	Description
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppForm.tsx

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

const AppForm = Form
const AppFormItem = FormItem
const AppFormLabel = FormLabel
const AppFormControl = FormControl
const AppFormDescription = FormDescription
const AppFormMessage = FormMessage
const AppFormField = FormField
const useAppFormField = useFormField

export {
  AppForm,
  AppFormItem,
  AppFormLabel,
  AppFormControl,
  AppFormDescription,
  AppFormMessage,
  AppFormField,
  useAppFormField,
}