Field Validation

Forms 3

About

A set of styled form-field wrappers (valid, invalid, warning, hint and live) that pair a label and input with a validation message wired through aria-describedby and aria-invalid.

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

Code

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

Usage.tsx

import {
  ValidField,
  InvalidField,
  WarningField,
  HintField,
  LiveField,
} from "@/components/ui/field-validation";

export default function FieldValidationDemo() {
  return (
    <div className="flex flex-col gap-8 p-8">
      <ValidField />
      <InvalidField />
      <WarningField />
      <HintField />
      <LiveField />
    </div>
  );
}