# Popover form (goodtabs UI)

A compact form in a popover with a title, fields, cancel and submit.

## Install

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

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

## Usage

```tsx
import { PopoverForm, PopoverFormField } from "@/components/ui/popover-form"

<PopoverForm title="Rename" trigger={<Button>Rename</Button>} onSubmit={(data) => save(data.get("name"))}>
  <PopoverFormField label="Name" id="name">
    <Input id="name" name="name" />
  </PopoverFormField>
</PopoverForm>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| trigger | `ReactNode` |  | The element that opens the popover, usually a Button. |
| title | `string` |  | Popover heading, also its accessible name. |
| description | `string` |  | Optional muted line under the title. |
| submitLabel | `string` | `"Save"` | Text of the submit button. |
| onSubmit | `(data: FormData) => void` |  | Receives the form data. The popover closes afterwards. |
| defaultOpen | `boolean` |  | Start open, for demos and tours. |

## When to use

- Renaming, tagging or reporting something without leaving the page
- One to three fields that belong next to the thing they change

## When not to use

- Long forms or anything with steps: use a dialog or a page
- Destructive confirmations: use an alert dialog

## Notes for agents

- Give every control a name attribute, the form data is read with FormData
- Field ids must be unique on the page, the label points at them
- Radix handles Escape, outside clicks and returning focus to the trigger

Docs: https://ui.goodtabs.co/components/popover-form