Form Error

Forms

About

A small validation message shown under a form field, that renders nothing when there is no error so it can be used unconditionally.

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

Code

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

Usage.tsx

import { useState } from "react";
import { Button } from "@/components/ui/button";
import FormError from "@/components/ui/form-error";

export default function Basic() {
  const [error, setError] = useState<string>();

  return (
    <div className="space-y-3">
      <Button
        onClick={() => setError(error ? undefined : "Something is missing.")}
        size="sm"
        variant="outline"
      >
        Toggle error
      </Button>
      {/* Renders nothing without children - no condition needed */}
      <FormError>{error}</FormError>
    </div>
  );
}