PromoCodeInput

molecules

Promo code field — input + Apply button. Shows success (with code pill + remove) or error message. Live region.

ARIA Role: group

Demo

Email address

With error

Please enter a valid value

Props

Prop	Type	Required	Default	Description
`onRemove`	`() => void`	Yes	`—`

TypeScript Interface

interface PromoCodeInputProps {
  onApply: (code: string) => Promise<{ success: boolean; error?: string }>;
  appliedCode?: { code: string; discount: number };
  onRemove: () => void;
}

Assertions (NASA Rule 5)

[type]onApply must be async; returns discriminated union (NASA Rule 7)(NASA Rule 7)
[aria]Error has role='alert'; success has role='status'; input has aria-describedby pointing to result(WCAG 3.3.1, 4.1.3)

Usage

Import

import { Promocodeinput } from '@epasslive/design-system'

Basic

<Promocodeinput />

With Variants

<Promocodeinput variant="primary" size="md" />