TicketTierList

organisms

Stack of TicketTier cards with shared quantity state. On selection, shows total in sticky footer with Continue button.

ARIA Role: region

Demo

Demo for TicketTierList (organisms)

Stack of TicketTier cards with shared quantity state. On selection, shows total in sticky footer with Continue button.

Props

Prop	Type	Required	Default	Description
`tiers`	`TicketTierConfig[]`	Yes	`—`	1-10 tiers
`onSelectionChange`	`(tierId: string, qty: number) => void`	Yes	`—`

TypeScript Interface

interface TicketTierListProps {
  tiers: TicketTierConfig[];
  selections: Record<string, number>;
  onSelectionChange: (tierId: string, qty: number) => void;
  onContinue: () => void;
  continueLabel?: string;
  maxTotal?: number;
}

Assertions (NASA Rule 5)

[type]tiers bounded 1-10 (NASA Rule 2)(NASA Rule 2)
[aria]Continue button announces total via aria-live; tier list has role='list'(WCAG 4.1.3)

Usage

Import

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

Basic

<Tickettierlist />

With Variants

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