Wit Form
Field Arrays

Invoice

Add, duplicate and remove line items. Row amounts and the total update as you type, and each one re-renders only when the values it watches change.

DescriptionQtyUnit priceAmountActions
Subtotal
$0.00
Tax (8%)
$0.00
Total
$0.00

What this shows

useFieldArray manages the line items. Each row has a stable rowId, used as the React key and passed to the row's fields as ancestors. See Field Arrays.

  • append, insert, remove and getFieldArrayValue add, duplicate and remove rows.
  • validate on the array requires at least one row.
  • RowAmount watches one row's fields with useFieldWatch. Totals watches two columns with useFieldArrayColumnWatch. Each re-renders only when the values it reads change.

On this page

What this shows