laif-ds/dist/agent-docs/components/Form.md

Design System di Laif con componenti React basati su principi di Atomic Design

# Form

## Overview

React Hook Form helpers: provider and primitives to build accessible fields with labels, descriptions, and error messages.

---

## Exports

- `Form` — React Hook Form provider (alias of `FormProvider`)
- `FormField` — Wraps `Controller` and provides field context
- `FormItem` — Field container that provides IDs to children
- `FormLabel` — Label bound to the current field
- `FormControl` — Slot wrapper that wires aria-attributes
- `FormDescription` — Helper text
- `FormMessage` — Error message (auto reads from RHF state)
- `useFormField` — Hook to access field context

---

## Example

```tsx
import { useForm } from "react-hook-form";
import { Input, Button } from "laif-ds";
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
} from "laif-ds";

export function ProfileForm() {
  const form = useForm<{ email: string }>({ defaultValues: { email: "" } });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit((v) => console.log(v))}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" placeholder="you@example.com" {...field} />
              </FormControl>
              <FormDescription>We will never share your email.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" className="mt-4">Save</Button>
      </form>
    </Form>
  );
}
```