KQ-584 · COUPON/SLOT

Coupon Slot

A coupon field shaped like the ticket it is. A code that takes tears the stub off along its perforation — a closing clip and a turn on the exit ease, because a tear accelerates away and never springs back — the seam's two halves part, a discount line glides in beneath the subtotal, and the total rolls down to meet it. A code that is refused nudges the field 4px and settles on recoil while the seam opens and reseals on that same spring; Enter applies, and the outcome is wired to the input through aria-describedby.

KQ-584 · COUPON/SLOT

Waylight checkout

Try WAYLIGHT10

Subtotal128.00

Total

Coupon code

Total 128.00 · no coupon

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/coupon-slot

Props

onApply: (code: string) => CouponResult | null; default —; Validates a code and returns { label, amount }, or null to refuse it.
subtotal: number; default —; The figure the discount comes off.
format: (value: number) => string; default —; Money formatter; the component prints nothing this does not return.
label: string; default Coupon code; Field label, shown above the stub.
onDiscountChange: (discount: CouponResult | null) => void; default —; Fires when a discount is applied or removed.

Prop	Type	Default	Description
onApply	(code: string) => CouponResult \| null	—	Validates a code and returns { label, amount }, or null to refuse it.
subtotal	number	—	The figure the discount comes off.
format	(value: number) => string	—	Money formatter; the component prints nothing this does not return.
label	string	Coupon code	Field label, shown above the stub.
onDiscountChange	(discount: CouponResult \| null) => void	—	Fires when a discount is applied or removed.