Tally UI

CashTendered

Cash amount input with quick-select buttons for common denominations

Import

import { CashTendered } from '@tallyui/components';

Usage

<CashTendered total={42.5} onChangeAmount={(amount) => console.log(amount)} />

Renders a set of quick-amount buttons alongside a text input so the cashier can record how much cash the customer handed over. Buttons auto-generate rounded denominations based on the order total, or you can supply your own.

Props

PropTypeDefaultDescription
totalnumberrequiredOrder total used to derive quick-select amounts
defaultAmountnumbertotalInitial amount when uncontrolled
amountnumberControlled amount value
onChangeAmount(amount: number) => voidCalled when the selected amount changes
quickAmountsnumber[]auto-generatedOverride the set of quick-select buttons
classNamestringOverride container styles

Live demo

On this page