# Email signup (goodtabs UI)

One line email field with a submit button, validation, pending and success states.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/email-signup.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/email-signup`

## Usage

```tsx
import { EmailSignup } from "@/components/ui/email-signup"

<EmailSignup onSubmit={async (email) => { await subscribe(email) }} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onSubmit | `(email: string) => void | Promise<void>` |  | Called with the trimmed address. A promise shows a pending state until it settles. |
| placeholder | `string` | `"you@example.com"` | Placeholder in the field. |
| buttonLabel | `string` | `"Subscribe"` | Label of the submit button. |
| successText | `string` | `"Check your inbox"` | Shown with a check mark once the submit settles. |
| align | `"start" | "center"` | `"start"` | Left aligned, or centered with the error text centered too. |

## When to use

- Newsletter, waitlist and changelog signups on a landing page or footer
- Anywhere one email address is the whole form
- When the result should stay inline, with no toast or page change

## When not to use

- Forms that need a name, a password or consent boxes: build a full form
- Signups that must confirm by redirect, where the success line would be wrong

## Notes for agents

- onSubmit is a function, so the component that renders EmailSignup must be a client component ("use client")
- Validation is a simple shape check on the client; validate again on the server
- If onSubmit throws, the row stays and a generic error shows; log the error where you call it
- It is a form element with noValidate, so do not nest it inside another form; the row is max-w-sm by default

Docs: https://ui.goodtabs.co/components/email-signup