KQ-736 · TENDER/SWITCH

Tender Switch

A three-stop radiogroup of tender methods whose one knob rides to the chosen stop on snap via a shared layoutId, while the chosen method's chip slides into the summary line from the left on snap as the old one leaves on the exit ease, so the method reads as having moved from the selector into the sale. Split unfolds two decimal fields below the summary, the region's measured height gliding open and the fields arriving in a cascade; they keep each other honest, editing one setting the other to the remainder clamped to the total, while a two-segment balance bar glides to the new proportion. Left and Right step without wrapping, Home and End jump, Space selects.

KQ-736 · TENDER/SWITCH

Waylight Pay · Sale$48.20

Paying byCard$48.20

Card · $48.20

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/tender-switch

Props

total: number; default —; The sale total the tender must cover.
value / defaultValue: "card" | "cash" | "split"; default "card"; Controlled or initial method.
onValueChange: (method: TenderMethod) => void; default —; Fires from the press or key that changed the method.
cardAmount / defaultCardAmount: number; default half the total, to cents; Controlled or initial card share when split; cash is always the remainder.
onCardAmountChange: (amount: number) => void; default —; Fires from the input that changed it, with the card share clamped to the total.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats the total and the summary amounts. The default pins an explicit locale so server and client agree.
label: string; default "Tender"; Names the radiogroup.

Prop	Type	Default	Description
total	number	—	The sale total the tender must cover.
value / defaultValue	"card" \| "cash" \| "split"	"card"	Controlled or initial method.
onValueChange	(method: TenderMethod) => void	—	Fires from the press or key that changed the method.
cardAmount / defaultCardAmount	number	half the total, to cents	Controlled or initial card share when split; cash is always the remainder.
onCardAmountChange	(amount: number) => void	—	Fires from the input that changed it, with the card share clamped to the total.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats the total and the summary amounts. The default pins an explicit locale so server and client agree.
label	string	"Tender"	Names the radiogroup.