"use client"; import { useState, type FormEvent } from "react"; import { AlertCircle, CheckCircle2, Loader2, Mail } from "lucide-react"; type Status = "idle" | "error" | "loading" | "success"; export default function FormNewsletterValidation() { const [email, setEmail] = useState(""); const [status, setStatus] = useState("idle"); const [error, setError] = useState(""); function onSubmit(e: FormEvent) { e.preventDefault(); if (!email.trim()) { setError("Enter your email to subscribe."); setStatus("error"); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) { setError("That doesn’t look like a valid email address."); setStatus("error"); return; } setStatus("loading"); setTimeout(() => setStatus("success"), 900); } return (

The Friday Frontend

One email a week with the best CSS tricks, React patterns and tooling news. Read by 38,000 developers.

{status === "success" ? (

Almost there! We sent a confirmation link to {email}.

) : (

Email address

{ setEmail(e.target.value); if (status === "error") setStatus("idle"); }} aria-invalid={status === "error"} aria-describedby={status === "error" ? "nl-error" : "nl-hint"} placeholder="you@example.com" className={`min-w-0 flex-1 rounded-lg border px-3 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 ${status === "error" ? "border-rose-400 focus:ring-rose-500/30" : "border-slate-300 focus:border-indigo-500 focus:ring-indigo-500/30"}`} />

{status === "error" ? (

{error}

) : (

No spam. Unsubscribe with one click.

)}

); }

Newsletter signup with validation

The Friday Frontend