# Coupon input

> Promo code field that validates, shows a removable ticket and shakes on errors.

Component · Pro · https://lodeui.com/components/coupon-input

## When to use

- Checkout and billing pages with promo codes.

## When not to use

- Gift cards with balances: show the balance too.

## Installation

```bash
npx shadcn@latest add @lode/coupon-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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.

## Related

- [Checkout](https://lodeui.com/blocks/checkout) — Three-step checkout with shipping choice, card entry, promo codes and order summary.
- [Shopping cart](https://lodeui.com/blocks/shopping-cart) — Cart with quantity steppers, remove with undo and free-shipping progress.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.