Budget Transfer Input
A free forms and inputs budget transfer editor for caller-controlled allocation balances in React.
Quarterly project budget
| Allocation | Accepted balance |
|---|---|
| Product | 1200 |
| Research | 680 |
| Reserve | 320 |
| Total | Total 2200 |
Transfer requests need JavaScript; accepted balances are shown above.
Requests update this example only after its caller accepts the proposed balances.
Customise
Code
import { useState } from "react";
const [allocations, setAllocations] = useState([
{ id: "product", label: "Product", amount: 1200 },
{ id: "research", label: "Research", amount: 680 },
{ id: "reserve", label: "Reserve", amount: 320 },
]);
<InputBudgetTransfer
allocations={allocations}
onTransferRequest={setAllocations}
label="Quarterly project budget"
/>Budget Transfer Input requests an exact whole-number transfer between two named allocations. It preserves bucket order and every untouched balance, and shows the caller-accepted total and balances.
The component treats allocations as its sole accepted state. A transfer callback receives a complete proposed replacement; balances change only when the caller supplies the accepted replacement. Invalid amounts, unknown buckets and overflow are rejected.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/input-budget-transferUsage
"use client";
import { useState } from "react";
import { InputBudgetTransfer } from "@/components/input-budget-transfer";
export function DepartmentBudget() {
const [allocations, setAllocations] = useState([{ id: "product", label: "Product", amount: 1200 }, { id: "research", label: "Research", amount: 680 }]);
return <InputBudgetTransfer allocations={allocations} onTransferRequest={setAllocations} label="Quarterly budget" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| allocations | readonly BudgetAllocation[] | required | Caller-accepted ordered buckets with unique IDs, labels and non-negative safe-integer amounts. |
| onTransferRequest | (nextAllocations: BudgetAllocation[]) => void | required | Receives the complete immutable proposed replacement allocation list. |
| label | string | "Budget transfer" | Accessible section and balance-table caption. |
| className | string | undefined | Additional classes merged onto the root section. |
Customisation
The component uses semantic form, table, foreground and focus tokens. Keep the accepted allocation list in application state and update it only when the request is approved:
<InputBudgetTransfer allocations={allocations} onTransferRequest={setAllocations} label="Quarterly budget" />Frequently asked questions
- Is Budget Transfer Input free for commercial use?
- Yes. The component is MIT licensed and may be used in personal and commercial projects.
- Does a requested transfer immediately change the balances?
- No. The callback receives a proposed replacement list. The displayed balances remain caller-controlled until the caller supplies accepted allocations.
- Can an allocation total exceed the safe integer range?
- No. A total outside JavaScript safe-integer bounds disables transfers and is reported as unavailable.