Contact 33 - Inline field validationPro
A contact form that validates each field on blur and on submit, with aria-invalid, per-field error messages, a live character counter and an error summary.
About Contact 33
A contact form that validates each field on blur and on submit, with aria-invalid, per-field error messages, a live character counter and an error summary.
Contact 33 is a contact block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 138 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- validation
- accessible
- errors
- form
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add contact-33Dependencies installed automatically: lucide-react.
Uses: button, input, label, reveal, textarea, utils.
Usage
import Contact33 from "@/components/blocks/contact-33"
export default function Page() {
return <Contact33 />
}