Repeatable Rows Form
Dynamic line-item form with editable description, quantity, and unit price columns, a remove button per row, an add row affordance, and a live running total.
Dynamic line-item form with editable description, quantity, and unit price columns, a remove button per row, an add row affordance, and a live running total.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Repeatable Rows Form is the dynamic line-item form for a New quote, opening with three editable rows: Annual licence Starter at 1 x $480, Setup and onboarding at 3 x $150, and Priority support add-on at 12 x $25. Each row has a description field, a right-aligned quantity field, a right-aligned unit price field, and a trash button that is disabled when only one row remains. An Add line item affordance appends a blank row. A live running total recalculates on every keystroke, and a footer note confirms nothing is saved until Submit.
Items are useState-managed with a typed LineItem shape; the row total derives from qty times unitPrice via parseFloat so partial input does not crash the total. The Save draft and Send quote buttons reflect the two realistic exit paths.
Reach for this block anywhere users compose a list of variable-count items with quantities and prices: quotes, orders, invoices, or expense reports. Wire onChange to your form state and the running total to your subtotal field.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a sales quote builder. Other repeatable row contexts:
Tip: disable the remove button at one row so the form never reaches an empty state that breaks validation.