Form

Forms

About

A native HTML form wrapper with consolidated validation error handling and vertical or horizontal layout, built for use with labeled field controls.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Form to your project and fits it to your theme.

Code

How Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { FormRoot } from "@/components/ui/form";
import { Button } from "@/components/ui/button";

export default function FormDemo() {
  return (
    <FormRoot
      className="w-full max-w-sm"
      onSubmit={(event) => {
        event.preventDefault();
      }}
    >
      <div className="flex w-full flex-col gap-1.5">
        <label
          htmlFor="demo-name"
          className="text-sm font-medium text-foreground"
        >
          Name
        </label>
        <input
          id="demo-name"
          name="name"
          placeholder="Jane Doe"
          required
          className="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none transition-colors focus-visible:outline-2 focus-visible:outline-ring"
        />
      </div>

      <div className="flex w-full flex-col gap-1.5">
        <label
          htmlFor="demo-email"
          className="text-sm font-medium text-foreground"
        >
          Email
        </label>
        <input
          id="demo-email"
          name="email"
          type="email"
          placeholder="jane@example.com"
          required
          className="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none transition-colors focus-visible:outline-2 focus-visible:outline-ring"
        />
      </div>

      <Button type="submit">Submit</Button>
    </FormRoot>
  );
}