ContactForm

form

A complete contact form with name, email, and message fields. Includes built-in validation, loading state, and success/error handling.

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { ContactForm } from "piece-ui";

2Usage

Basic usage

tsx

1import { ContactForm } from "piece-ui";
2
3export default function Example() {
4  const handleSubmit = async (data: FormData) => {
5    const res = await fetch("/api/contact", {
6      method: "POST",
7      body: JSON.stringify(Object.fromEntries(data)),
8    });
9    if (!res.ok) throw new Error("Failed to send");
10  };
11
12  return (
13    <ContactForm
14      onSubmit={handleSubmit}
15      successMessage="Thanks! I'll get back to you soon."
16    />
17  );
18}

3Props

Prop	Type	Default	Description
`onSubmit`req	`(data: FormData) => Promise<void>`	—	Async submit handler that receives form data.
`successMessage`	`string`	`"Message sent!"`	Message shown on successful submission.
`className`	`string`	—	Additional CSS classes for the form wrapper.

ConfirmDialog

CustomBtn