React Hook Form Patterns

# React Hook Form Patterns for Google Antigravity

Build performant forms with React Hook Form in your Google Antigravity IDE projects. This comprehensive guide covers validation, field arrays, controlled components, and submission patterns optimized for Gemini 3 agentic development.

## Basic Form Setup

Create type-safe forms with Zod:

```typescript
// components/PromptForm.tsx
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  title: z.string().min(5, 'Title must be at least 5 characters'),
  description: z.string().min(20, 'Description required'),
  content: z.string().min(100, 'Content must be at least 100 characters'),
  tags: z.array(z.string()).min(1, 'At least one tag required'),
  isPublic: z.boolean().default(true),
});

type FormData = z.infer<typeof schema>;

export function PromptForm({ onSubmit }: { onSubmit: (data: FormData) => Promise<void> }) {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      title: '',
      description: '',
      content: '',
      tags: [],
      isPublic: true,
    },
  });

  const handleFormSubmit = async (data: FormData) => {
    await onSubmit(data);
    reset();
  };

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)}>
      <div className="field">
        <label htmlFor="title">Title</label>
        <input id="title" {...register('title')} />
        {errors.title && <span className="error">{errors.title.message}</span>}
      </div>

      <div className="field">
        <label htmlFor="description">Description</label>
        <textarea id="description" {...register('description')} rows={3} />
        {errors.description && <span className="error">{errors.description.message}</span>}
      </div>

      <div className="field">
        <label htmlFor="content">Content</label>
        <textarea id="content" {...register('content')} rows={10} />
        {errors.content && <span className="error">{errors.content.message}</span>}
      </div>

      <div className="field">
        <label>
          <input type="checkbox" {...register('isPublic')} />
          Make public
        </label>
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Create Prompt'}
      </button>
    </form>
  );
}
```

## Field Arrays

Handle dynamic fields:

```typescript
// components/TagsField.tsx
import { useFieldArray, useFormContext } from 'react-hook-form';

export function TagsField() {
  const { control, register } = useFormContext();
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'tags',
  });

  return (
    <div className="tags-field">
      <label>Tags</label>
      
      {fields.map((field, index) => (
        <div key={field.id} className="tag-row">
          <input {...register(`tags.${index}`)} />
          <button type="button" onClick={() => remove(index)}>×</button>
        </div>
      ))}

      {fields.length < 5 && (
        <button type="button" onClick={() => append('')}>
          Add Tag
        </button>
      )}
    </div>
  );
}
```

## Controlled Components

Integrate with custom components:

```typescript
// components/ControlledSelect.tsx
import { Controller, useFormContext } from 'react-hook-form';

export function CategorySelect() {
  const { control, formState: { errors } } = useFormContext();

  return (
    <Controller
      name="category"
      control={control}
      render={({ field }) => (
        <div className="field">
          <label>Category</label>
          <select {...field}>
            <option value="">Select category</option>
            <option value="react">React</option>
            <option value="typescript">TypeScript</option>
            <option value="nextjs">Next.js</option>
          </select>
          {errors.category && (
            <span className="error">{errors.category.message}</span>
          )}
        </div>
      )}
    />
  );
}
```

## Form Provider

Share form state:

```typescript
// components/FormProvider.tsx
import { FormProvider, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { schema, FormData } from '@/schemas/prompt';

export function PromptFormProvider({
  children,
  onSubmit,
}: {
  children: React.ReactNode;
  onSubmit: (data: FormData) => Promise<void>;
}) {
  const methods = useForm<FormData>({
    resolver: zodResolver(schema),
    mode: 'onBlur',
  });

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        {children}
      </form>
    </FormProvider>
  );
}

// Usage
function CreatePromptPage() {
  return (
    <PromptFormProvider onSubmit={handleSubmit}>
      <TitleField />
      <DescriptionField />
      <ContentField />
      <TagsField />
      <SubmitButton />
    </PromptFormProvider>
  );
}
```

## Watch and Dependencies

React to field changes:

```typescript
// components/ConditionalFields.tsx
import { useFormContext, useWatch } from 'react-hook-form';

export function ConditionalFields() {
  const { control, register } = useFormContext();
  
  // Watch specific fields
  const isPublic = useWatch({ control, name: 'isPublic' });
  const category = useWatch({ control, name: 'category' });

  return (
    <>
      {isPublic && (
        <div className="field">
          <label>Public Description</label>
          <textarea {...register('publicDescription')} />
        </div>
      )}

      {category === 'api' && (
        <div className="field">
          <label>API Version</label>
          <input {...register('apiVersion')} />
        </div>
      )}
    </>
  );
}
```

## Best Practices

1. **Use Zod resolver** for validation
2. **Leverage FormProvider** for complex forms
3. **Use Controller** for custom components
4. **Implement field arrays** for dynamic fields
5. **Handle loading** during submission
6. **Show errors** accessibly
7. **Use mode: onBlur** for better UX