Coupon inputPro
Promo code field that validates, shows a removable ticket and shakes on errors.
- Subtotal
- $129.00
- Total
- $129.00
Try LAUNCH20 or FRIENDS
When to use
- Checkout and billing pages with promo codes.
When not to use
- Gift cards with balances: show the balance too.
Installation
Usage
Import it from @/components/ui/coupon-input after installing.
example.tsx
import { CouponInput } from "@/components/ui/coupon-input";
<CouponInput onApply={(code) => validateCode(code)} onRemove={clearCode} />API reference
CouponInput
A code field that becomes a ticket once applied.
| Prop | Type | Default | Description |
|---|---|---|---|
| onApply | (code) => Promise<{ code; description }> | – | Throw with a message for invalid codes. |
| applied / onRemove | AppliedCoupon | null / () => void | – | Controlled applied state. |
| label | string | "Promo code" | Field label. |
Keyboard interactions
| Keys | Action |
|---|---|
| Enter | Apply |
| Tab | Reach the remove button |
Accessibility
- Errors use role="alert" and aria-invalid; applying is announced.
Motion
- Wrong codes shake the field; valid ones pop into a ticket.
Responsive behavior
- Up to 384px.
Performance
- One request per apply.
Notes for AI
- Codes are upper-cased before onApply.
This page as Markdown, for assistants and coding agents:
/components/coupon-input/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt