Form Field

Forms

About

A form field wrapper that pairs a label, input, helper text, and a shake-animated error message for client-side validated inputs.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import { FormField } from "@/components/ui/form-field";

export default function FormFieldDemo() {
  const [error, setError] = React.useState<string | undefined>(undefined);

  return (
    <div className="flex w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-sm space-y-4">
        <FormField
          label="Email address"
          htmlFor="email"
          description="We'll never share your email"
          error={error}
          required
        />

        <button
          type="button"
          onClick={() =>
            setError((prev) =>
              prev ? undefined : "Please enter a valid email address",
            )
          }
          className="text-sm font-medium text-primary underline-offset-4 hover:underline"
        >
          Toggle validation error
        </button>
      </div>
    </div>
  );
}