Coupon Code Input

The coupon field every checkout page needs. Input is auto-uppercased, whitespace-stripped and truncated to the length limit; pressing Apply or Enter hands the code to the onApply validator you provide, while the button shows a loading spinner and sets aria-busy. On success the input row switches to a ticket chip with a perforated left edge — a stub tears off and falls away, and the discount amount rolls in digit by digit; press the × on the right to remove it and type again. On failure the input shakes horizontally, turns red and shows the reason, ready for another try. Both the input value and the applied state support controlled and uncontrolled modes.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<CouponCodeInput/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/coupon-code-input.en.json

Usage

import { CouponCodeInput } from "@/components/ui/coupon-code-input";

<CouponCodeInput
  label="Discount Code"
  currency="NT$"
  onApply={async (code) => {
    // Validate against your API; return ok plus the discount info
    if (code === "WELCOME100") {
      return { ok: true, discount: 100, label: "New Customer Gift" };
    }
    return { ok: false, reason: "No matchingDiscount Code" };
  }}
  onRemove={(code) => console.log(`removed ${code}`)}
/>

Props

AppliedCoupon

CouponApplyResult

normalizeCouponCode(raw, maxLength) is also a named export, so the same normalisation logic can be reused at the form layer.

How it works

• Ticket visuals: the serrated perforation along the left edge is a CSS mask (a repeating radial-gradient punching out half circles), so the notches are genuinely transparent and work on any background; after a successful apply, a small stub piece covers the right end of the ticket, then tears away, rotating and falling as it fades.
• Case normalisation: every input path (typing, pasting, controlled values) goes through normalizeCouponCode — uppercase, strip all whitespace, truncate to maxLength.
• Enter submission is IME-safe: pressing Enter while composing with a Chinese (or other) IME does not submit, and the Safari case where keydown fires only after compositionend is handled too.
• Validation is asynchronous: pressing Apply again while checking is ignored; an exception thrown by onApply counts as a failure with a generic error message; and if the user removes and retries while a check is in flight, the stale earlier result is discarded instead of overwriting the new state.

Accessibility

• The label is associated with the input via htmlFor; on failure aria-invalid is set and aria-describedby points at the message area
• Status messages (checking / failure reason / applied) live in a role="status", aria-live="polite" region, so changes are announced by screen readers
• The Apply button sets aria-busy and is disabled while checking, preventing duplicate submissions; the remove button carries an aria-label that includes the coupon code
• The applied ticket chip is a role="group" whose aria-label fully describes the code, discount amount and label; the per-digit rolling amount animation is hidden from assistive technology
• When the user has reduce motion enabled at the system level, the tear-off, rolling amount and shake animations are disabled and the state switches directly