<!-- source-hash: 5c621a80fa78cd0b2d7325f392c2df01 -->
A comprehensive form component system built on top of react-hook-form and Radix UI primitives, providing accessible form elements with automatic error handling and validation state management.

## Key Components

- **Form**: Alias for react-hook-form's `FormProvider` to wrap form contexts
- **FormField**: Wrapper around react-hook-form's `Controller` with context integration
- **FormItem**: Container component that provides unique IDs for form field associations
- **FormLabel**: Accessible label component with automatic error styling
- **FormControl**: Control wrapper with ARIA attributes for accessibility
- **FormDescription**: Helper text component linked via `aria-describedby`
- **FormMessage**: Error message component that displays validation errors
- **useFormField**: Custom hook providing form field state and accessibility IDs

## Usage Example

```typescript
import { useForm } from "react-hook-form"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "./form"
import { Input } from "./ui/input"

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

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="Enter email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  )
}
```

The system automatically handles ARIA attributes, error states, and accessibility concerns while maintaining type safety with TypeScript generics for field values and names.