Forms

Quote builder

Build a local quote from seat and service quantities with discount validation and a saved total.

Quote builder

Build a local quote from seat and service quantities with discount validation and a saved total.

Customer

Line item	Quantity	Rate
Platform seats	Seats	$24.00
Onboarding hours	Hours	$120.00

Discount percent

Quote summary

Subtotal$1632.00

Discount10%

Quote total

$1468.80

Valid for 30 days. Taxes calculated at invoicing.

Using Quote builder

Build a local quote from seat and service quantities with discount validation and a saved total.

Build a local quote from seat and service quantities with discount validation and a saved total. For controlled React use, pass value and onChange; onAction receives the action and resulting state. Use defaultValue for a local draft.

Eight seats and twelve onboarding hours with a ten percent discount produce a $1,468.80 quote. This example only updates local draft state.

Amounts and decisions are illustrative local data. No charge, subscription change, or financial transaction is sent; the host must validate prices and persist the result.

Props: accent, status

How does the application receive changes?

For controlled React use, pass value and onChange; onAction receives the action and resulting state. Use defaultValue for a local draft.

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

Source, ports, install and the props panel are included with Fieldbook Pro. The live preview is open to everyone.

Connect your agent

Nearby

1925Branded Code PanelFormsA centred verification panel under a small brand lockup, where a rejected code shakes the row once, clears it and hands focus back to the first box.

1938Code cover cardFormsA wide verification card with the code form on one side and a cover panel on the other that fills a progress bar as digits are entered.

1965Control BenchFormsCompose text with context, preview formatting, and expose form actions through reusable callbacks.

2856Credit balance ledgerData displayInspect account credits and apply an eligible balance to an open invoice with a ledger entry.

2860Environment variable editorFormsEdit scoped environment values and validate variable names before staging changes.

1957Field with status iconFormsA labeled input whose trailing edge shows a small check or warning icon that fades in the moment the field's validity changes, without shifting the layout.