Form

Compound form on Base UI Field + react-hook-form + Zod. Single island because compound state.

stable client:visible

Rendered example — light + dark

Light

Dark

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Form, FormField } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

const schema = z.object({ email: z.string().email() });

export default function Subscribe() {
  const form = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...form} onSubmit={form.handleSubmit(console.log)}>
      <FormField name="email" render={({ field }) => <Input {...field} />} />
      <Button type="submit">Subscribe</Button>
    </Form>
  );
}