# Invoice Creator block

> Invoice creator form with editable line-items table and live discount, tax, and total summary

Invoice builder with customer combobox, date pickers, currency and term selects, an editable line-items table, and a live subtotal, discount, tax, and total panel. ReUI Badge with shadcn Card, Table, Combobox, Calendar. For billing and invoicing.

- Type: Pro block
- Category: [Form](https://web.dev.reui.io/blocks/application/form.md)
- Page: https://web.dev.reui.io/blocks/application/form/form-3
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/field.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/field.md
- MCP: `get_block("form-3")`
- Built with: Badge, Button, Calendar, Card, Combobox, Field, Input, Input Group, Popover, Select, Separator, Table, Textarea, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A full page invoice editor with a sticky Send invoice toolbar, where each line's product sets its rate and tax for live totals

## Agent notes

- Replace `INVOICE_CUSTOMERS`, `INVOICE_PRODUCTS` and `DEFAULT_INVOICE_LINES`, and bind Tax ID and Billing Address to the `Combobox` pick, not the first customer
- `taxAmount` taxes each full line amount, so the discount the summary says applies before tax never lowers the tax
- `onFeedback` and `onSaveDraft` only call `showInvoiceToast`, and the Close invoice editor button has no handler

## When not to use

- An invoice built and sent across 4 steps with a progress Stepper: use [Send Invoice](https://web.dev.reui.io/blocks/application/wizard/wizard-3.md) (`get_block("wizard-3")`)
- A printable record of a paid order with totals and shipment tracking: use [Order Confirmation](https://web.dev.reui.io/blocks/ecommerce/receipt/receipt-1.md) (`get_block("receipt-1")`)

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

```bash
npx shadcn@latest add @reui/form-3
```

## About Form blocks

### When to use

- New record entry: an invoice with line items, a product, an app launch, an onboarding plan or a member invite
- Editing a record already on file, such as a user profile, a support ticket or a business verification
- Admin configuration pages for hosted checkout, sign-in methods and lockout rules, or API keys

### When not to use

- An account area that swaps team, notification and billing panels from a side rail or tabs: use the [Profile blocks](https://web.dev.reui.io/blocks/application/profile.md)
- A list of toggles for notification channels, app integrations or workspace options: use the [Settings blocks](https://web.dev.reui.io/blocks/application/settings.md)
- A create, invite or connect flow that opens over the current page in a modal: use the [Dialog blocks](https://web.dev.reui.io/blocks/application/dialog.md)

### Agent notes

- Each submit handler calls `preventDefault` and sends no request; post the values to your API from it
- Save feedback calls `toast` from `sonner`; mount the sonner Toaster once in your layout or no message shows
- Each block sets its own `min-h-svh` wrapper, padding and max width in page.tsx or its root component; drop them inside an app shell

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.