Accessible form primitives built on top of `react-hook-form` and Radix UI, providing context-aware field wrappers with built-in ARIA attributes, error styling, and label association. ## Key Components | Export | Description | |---|---| | `Form` | Re-export of `react-hook-form`'s `FormProvider` — wraps the entire form | | `FormField` | Wraps `Controller` and injects field name into context | | `FormItem` | Container div that generates a unique `id` for ARIA linkage | | `FormLabel` | Label that auto-links to the field input and applies `text-destructive` on error | | `FormControl` | Radix `Slot` with pre-wired `id`, `aria-describedby`, and `aria-invalid` | | `FormDescription` | Helper text paragraph linked via `aria-describedby` | | `FormMessage` | Displays validation error messages (or custom children) with destructive styling | | `useFormField` | Hook exposing field state, IDs, and error info — must be used inside `` | ## Usage Example ```typescript import { useForm } from "react-hook-form" import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage, } from "./form" import { Input } from "./ui/input" function ProfileForm() { const form = useForm<{ username: string }>() return (

( Username Your public display name. )} /> Submit ) } ``` > **Note:** `useFormField` must only be called within a `` tree; it throws if `FormFieldContext` is missing. **Source:** [`form.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/form.tsx)