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 Form from "@/components/ui/form";
import {
Button,
FieldError,
Input,
Label,
TextField,
} from "react-aria-components";
export default function FormDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-[var(--background)] p-8 text-[var(--foreground)]">
<Form
className="flex w-full max-w-sm flex-col gap-5 rounded-xl border border-[var(--border)] bg-[var(--background)] p-6"
onSubmit={(e) => e.preventDefault()}
>
<div className="flex flex-col gap-1">
<h2 className="text-lg font-semibold">Contact us</h2>
<p className="text-sm text-muted-foreground">
We typically reply within a day.
</p>
</div>
<TextField
name="email"
type="email"
isRequired
className="flex flex-col gap-1.5"
>
<Label className="text-sm font-medium">Email</Label>
<Input
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)]"
/>
<FieldError className="text-sm text-red-500" />
</TextField>
<TextField
name="message"
isRequired
minLength={10}
className="flex flex-col gap-1.5"
>
<Label className="text-sm font-medium">Message</Label>
<Input
placeholder="How can we help?"
className="rounded-md border border-[var(--border)] bg-transparent px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
/>
<FieldError className="text-sm text-red-500" />
</TextField>
<Button
type="submit"
className="mt-1 rounded-md bg-[var(--primary)] px-4 py-2 text-sm font-medium text-[var(--primary-foreground)]"
>
Send message
</Button>
</Form>
</div>
);
}
