Promotion
CouponInput
Coupon code input with apply button and validation feedback.
CouponInput
An input field for coupon codes with an apply button. Shows success/error states after submission and displays the applied coupon with a remove option.
Preview
Try code: SAVE20
Usage
<CCouponInput @apply="handleApply" @remove="handleRemove" />
Pre-Applied Coupon
<CCouponInput
:applied-coupon="{ code: 'SAVE20', discountLabel: '20% off' }"
@remove="handleRemove"
/>
With Loading State
<CCouponInput :loading="isApplying" @apply="handleApply" />
With Error
<CCouponInput :error="'Invalid coupon code'" @apply="handleApply" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
appliedCoupon | { code: string; discountLabel?: string } | null | null | Currently applied coupon |
loading | boolean | false | Show loading spinner |
error | string | null | null | Error message |
placeholder | string | 'Coupon code' | Input placeholder |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
apply | string | Coupon code submitted |
remove | — | Applied coupon removed |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
applied | { coupon, remove } | Custom applied coupon display |
input | { code, apply } | Custom input + button |