Coupon input

v1.0.0·Added in 1.0.0

The promo code field of carts and checkouts: a link that opens it, Apply inside the box, async checks and applied codes as chips.

Tap or click "Have a promo code?" and the field slides open with the cursor in it (the chevron turns). Type a code in any case with any spaces; it shows in capitals. Press Enter or Apply: with a server check the button spins while it waits, and Enter never submits the checkout form around it. A good code lands as a chip with a check that pops, the code, its label and what it saves; at the code limit the field folds away until you remove a chip. A bad code shakes the box and says what to do ("Add $45.20 more to use SAVE50", "This code expired on August 31, 2026"). Escape clears the typed code; a second Escape on an empty field closes it and puts focus back on the link. Escape while a code is being checked does nothing. Tab reaches the remove button of each chip; Enter, Space, Backspace or Delete removes it. When the cart changes, catalogue codes recount what they save and a code that no longer applies turns amber with a note under it. Every outcome is read out once by screen readers; on a phone the outcome also buzzes. Under reduced motion everything fades instead of moving.