Form

Renders a form with animated error messages and accessibility features. It handles form submission, tracks errors, and applies animations on error states. Use it to create accessible forms with visual feedback for errors.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/form

npx layro-cli add @educlopez/form

npx layro-cli add @educlopez/form

bunx layro-cli add @educlopez/form

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { cn } from "@/lib/utils";
import { Check } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type React from "react";
import {
  cloneElement,
  createContext,
  useCallback,
  useContext,
  useEffect,
  useId,
  useMemo,