Payment Milestones That Add to 100%

ProNew

Milestone rows with a percentage each, a running total, the amount left to assign, and a one-click "assign the rest" to the last row; the form only submits at exactly 100%. Use this when rows share a fixed budget.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

total10000

currency

Guide and examples

When to use it

Rows divide a whole (payment schedule, revenue split, time allocation) and the sum must be exact.

Do not use it when: When parts are independent amounts without a fixed total, use the invoice line items.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`total`	`number`	`10000`	The amount the percentages divide.
`currency`	`string`	`USD`	ISO 4217 code.
`onSubmit`	`(milestones) => void`	-	Called only when the percentages add to exactly 100.

Accessibility

The remaining or excess percentage is a polite status in plain words ("20% still to assign.", "10% over."), with the success state in text as well as color.
Percentages are added in tenths, so three rows of 33.3, 33.3 and 33.4 reach exactly 100; the save button stays disabled until they do, and its label stays the same.
The money amount for each row is an output named after the milestone; "Assign the rest" is an explicit button, not an automatic change to a row the person is not editing.

Testing

The pattern ships with a Testing Library test (payment-milestones-percent.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.