A form wrapper built on React Aria that groups fields into a single submit/validation boundary, with an optional variant that binds to a react-hook-form instance.
"use client";
import { HookForm, FormField } from "@/components/ui/form-utils/hook-form";
import { useForm } from "react-hook-form";
import { Input, Label, TextField } from "react-aria-components";
interface SignInValues {
email: string;
password: string;
}
export default function HookFormDemo() {
const form = useForm<SignInValues>({
defaultValues: { email: "", password: "" },
});
const onSubmit = form.handleSubmit((values) => {
// eslint-disable-next-line no-console
console.log(values);
});
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[var(--background)] p-8 text-[var(--foreground)]">
<HookForm
form={form}
onSubmit={onSubmit}
className="flex w-full max-w-sm flex-col gap-5 rounded-xl border border-[var(--border)] bg-[var(--background)] p-6"
>
<div className="flex flex-col gap-1">
<h2 className="text-lg font-semibold">Sign in</h2>
<p className="text-sm text-muted-foreground">
Fields bound to a react-hook-form instance.
</p>
</div>
<FormField control={form.control} name="email">
{({ field }) => (
<TextField
name={field.name}
value={field.value}
onChange={field.onChange}
onBlur={field.onBlur}
className="flex flex-col gap-1.5"
>
<Label className="text-sm font-medium">Email</Label>
<Input
ref={field.ref}
placeholder="you@example.com"
className="rounded-md border border-[var(--border)] bg-transparent px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
/>
</TextField>
)}
</FormField>
<FormField control={form.control} name="password">
{({ field }) => (
<TextField
type="password"
name={field.name}
value={field.value}
onChange={field.onChange}
onBlur={field.onBlur}
className="flex flex-col gap-1.5"
>
<Label className="text-sm font-medium">Password</Label>
<Input
ref={field.ref}
placeholder="••••••••"
className="rounded-md border border-[var(--border)] bg-transparent px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
/>
</TextField>
)}
</FormField>
<button
type="submit"
className="mt-1 rounded-md bg-[var(--primary)] px-4 py-2 text-sm font-medium text-[var(--primary-foreground)]"
>
Sign in
</button>
</HookForm>
</div>
);
}
