# Contact section (goodtabs UI)

A contact form with labelled fields, inline validation and pending and success states.

## Install

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

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

## Usage

```tsx
import { ContactSection } from "@/components/contact-section"

<ContactSection title="Talk to us" onSubmit={async (v) => { await send(v) }} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the title. |
| title | `ReactNode` |  | The section heading. |
| description | `ReactNode` |  | One or two sentences under the title. |
| onSubmit | `(values: { name: string; email: string; message: string }) => void | Promise<void>` |  | Called with trimmed values once valid. A rejection shows a retry message. No network call is made by default. |
| buttonLabel | `string` | `"Send message"` | Label of the submit button. |
| successText | `string` |  | Shown once the submit settles. |
| minMessage | `number` | `20` | Minimum message length in characters. |
| size | `"sm" | "default"` | `"default"` | Spacing scale. sm fits a card. |

## When to use

- A contact or support page with three fields
- When you want inline errors without a form library

## When not to use

- For long or multi step forms, use form-section
- For a single email field, use email-signup

## Notes for agents

- Client component; a demo that passes onSubmit must itself be "use client"
- Errors show after a field is blurred or after the first submit, and focus moves to the first invalid field
- The component never sends anything; wire onSubmit to your own endpoint

Docs: https://ui.goodtabs.co/components/contact-section