An email field and button in one pill, with progress, validation, an error line and a success state.
pnpm dlx shadcn@latest add @latheui/email-capturePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Email Capture is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native form attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmit* (required) | (email: string) => void | Promise<void> | — | Receives the trimmed address. A pending promise shows progress; a rejection shows an error. |
| label | string | "Email address" | Accessible name of the field. |
| placeholder | string | "you@example.com" | Placeholder text. |
| buttonLabel | string | "Subscribe" | Text of the submit button. |
| successMessage | ReactNode | "You are on the list." | Replaces the field after a successful submit. |
| errorMessage | string | "Something went wrong. Try again." | Shown when onSubmit fails without an Error message of its own. |
| description | ReactNode | — | Small print under the field. |
<EmailCapture
buttonLabel="Join waitlist"
placeholder="you@company.com"
successMessage="You are in. We will be in touch."
description="No spam. One email when we launch."
onSubmit={join}
/>