Line Item Editor

Code

const [lines, setLines] = useState<LineItemEditorLine[]>([]);<LineItemEditor  value={lines}  onValueChange={setLines}  products={[{ id: "p1", name: "Coffee beans", sku: "CB-1", price: 6500, taxBps: 1500 }]}  currency="SAR"  defaultTaxBps={1500}/>;

Billing · beta

Live examples and controls: Line Item Editor in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/line-item-editor.json

The lines of an invoice, quote or order. Pick a product to fill its name, price and tax rate, or type a free line. Quantity, unit price, discount and tax are editable per line, and the totals are computed in integer minor units, so there is no float drift. It is controlled: you own the array of lines.

When to useCopy Anchor Link

• Quotes, invoices, purchase orders and any list of priced lines.

When not to useCopy Anchor Link

• Read-only invoices: use InvoiceView.
• A touch till: use PosRegister.

ImportCopy Anchor Link

import { LineItemEditor, computeLineItems } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

const [lines, setLines] = useState<LineItemEditorLine[]>([]);

<LineItemEditor
  value={lines}
  onValueChange={setLines}
  products={[{ id: "p1", name: "Coffee beans", sku: "CB-1", price: 6500, taxBps: 1500 }]}
  currency="SAR"
  defaultTaxBps={1500}
/>;

APICopy Anchor Link

LineItemEditorProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children">.

Money helpersCopy Anchor Link

computeLineItems(items, { taxMode, taxRounding, defaultTaxBps, orderDiscount }) returns per-line gross, discount, taxable, tax and total, the totals and the tax groups. Rounding is half away from zero on BigInt products. allocateMinor shares an amount with the largest-remainder method so the parts always add up. LineItemMoney, LineItemDecimalField and LineItemActionsMenu are the small pieces the POS and ledger components reuse.

ExamplesCopy Anchor Link

Tax-inclusive prices: <LineItemEditor taxMode="inclusive" />. Tax rounded once per rate: taxRounding="invoice".

AccessibilityCopy Anchor Link

• Every field is named with its line, for example "Qty, Steel tumbler".
• Line actions are in a menu button and in the context menu, so pointer and keyboard users get the same actions.

RTL & i18nCopy Anchor Link

Built-in English and Arabic. Amounts use Intl and are isolated left to right. Fields accept Arabic-Indic digits.

Styling & tokensCopy Anchor Link

Semantic tokens only. It uses container queries: a table at wide widths and stacked cards below. Target [data-slot="line-item-editor"].

Do / Don'tCopy Anchor Link

• Do keep money in minor units in your data model.
• Do recompute on the server with the same rounding options.
• Don't multiply prices with floats yourself.

RelatedCopy Anchor Link

• currency-input
• invoice-view
• price

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-billing-line-item-editor--docs