# Shadcn Form blocks

> Form layouts for settings, profiles, and data entry with validation and grouped fields.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/form
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/field.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/field.md
- Blocks: 12
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 12 of 12 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 3 of 12 blocks
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 2 of 12 blocks
- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt), used by 2 of 12 blocks
- Headless Tree v1: [API reference](https://headless-tree.lukasbach.com/api/core/), [docs](https://headless-tree.lukasbach.com/getstarted/), used by 1 of 12 blocks

## Blocks

- [Business Verification](https://web.dev.reui.io/blocks/application/form/form-6.md): Business Verification Review Page with Editable Detail Sections and Dialog Forms. Best for a read only review of 3 Frame panels whose Edit buttons open Dialog forms, with Stripe and PayPal source logos.
- [Profile Settings](https://web.dev.reui.io/blocks/application/form/form-1.md): Profile settings card form with completion badge and date-plus-time availability picker. Best for a single Card profile with a date and half hour slot availability picker, specialty chips and an available to hire switch.
- [Checkout Setup](https://web.dev.reui.io/blocks/application/form/form-2.md): Hosted checkout setup form with label-and-control rows, Select dropdowns, and checkbox groups. Best for checkout options as 3 checkbox groups, one option locked until legal terms connect, under a Ready to publish badge.
- [Invoice Creator](https://web.dev.reui.io/blocks/application/form/form-3.md): Invoice creator form with editable line-items table and live discount, tax, and total summary. 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.
- [Auth Method Settings](https://web.dev.reui.io/blocks/application/form/form-4.md): Authentication settings form with line tabs for email, phone, password, passkey, and lockout policy. Best for a sign-in policy page with 7 line tabs and status dots, a Preview, Staging or Production target and lockout rules.
- [Member Profile Admin](https://web.dev.reui.io/blocks/application/form/form-5.md): Tabbed user profile settings form with sticky audit rail and activity heatmap. Best for a member record an admin edits, with a sticky audit rail, a 52 week activity heatmap and a Suspend access menu item.
- [Ticket Properties](https://web.dev.reui.io/blocks/application/form/form-7.md): Inline-editable ticket details panel with per-row save, status and SLA badges, tags and owner chips. Best for a narrow ticket properties panel where each row edits in place with its own discard and save icons and a saving spinner.
- [API Keys Manager](https://web.dev.reui.io/blocks/application/form/form-8.md): API keys management panel with per-stack env snippet quick-copy and reveal, rotate, revoke rows. Best for masked keys to reveal, rotate or revoke under a copyable env snippet for 6 stacks, with a scoped create key Dialog.
- [Role Permission Invite](https://web.dev.reui.io/blocks/application/form/form-9.md): Enterprise member invite form with searchable role permission tree and access guardrails. Best for teammate invites that pick roles from a searchable checkbox tree of 7 groups with Privileged and MFA badges.
- [Customer Onboarding](https://web.dev.reui.io/blocks/application/form/form-10.md): Customer onboarding intake form in a Card with labeled rows and multi-owner combobox. Best for a new workspace intake whose footer restates team size, launch window and owner count, with a Create Plan spinner.
- [Deploy App Setup](https://web.dev.reui.io/blocks/application/form/form-11.md): New App Launch Form with Gradient Summary Banner and Label-Control Rows. Best for an app deploy form under a gradient banner that echoes the chosen template, repository, runtime and region.
- [New Product Form](https://web.dev.reui.io/blocks/application/form/form-12.md): Ecommerce product creation form with image upload, pricing, inventory, and collections combobox. Best for a catalog product with a 5 image thumbnail dropzone, price and compare at price, SKU, stock and collection chips.

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.