TicketTierList

Implemented

Single-selection radiogroup of ticket tier cards — name, description, price, perks, availability and fees per tier. Sold-out tiers disable their radio and dim the card; the highlight flag tints a recommended tier. Locale-aware labels (fr/en).

Categoryorganisms

Sourcecomponents/organisms/tickettierlist/TicketTierList.tsx

AI HintUse for single-choice ticket category selection (event registration, pass purchase). For per-tier quantity steppers use TicketSelector; the deprecated molecule TicketTier is superseded by this organism.

Liste de catégories de billets sous forme de cartes radio (1/2 colonnes responsive). FR-CA : « Économique · Admission générale · Première balcon · Salon privilège · places restantes · Choisir ».

TicketTierList

Organism — Commerce family (Family 7)

Grille de cartes radio accessibles (role="radiogroup"). L'option sélectionnée est marquée par ring-2 + border-ep-teal. Les catégories sold-out sont désactivées et étiquetées 0 places restantes.

Économique

38,00 $

Places debout en fosse

Accès fosse

47 places restantes · frais 1,90 $

Admission générale

48,00 $

Places assignées en parterre

Siège assigné
Programme souvenir

132 places restantes · frais 2,40 $

Première balcon

88,00 $

Vue surélevée — places numérotées

Service au siège
Coupe-file
Programme souvenir

24 places restantes · frais 4,40 $

Salon privilège

164,00 $

Salon privé avant et après le concert

Buffet inclus
Boissons
Place de stationnement

0 places restantes · frais 8,20 $

This component supports light and dark mode.

Props

Prop

Type

Default

Description

tiers*

TicketTier[]

—

Catégories de billets.

selectedId

string

—

Catégorie sélectionnée.

onSelect

(id) => void

—

Sélection.

locale

"fr" | "en"

—

Locale des libellés intégrés (fr/en).

className

string

—

Classes supplémentaires sur le wrapper.

Props

Preview

TicketTierList

Prop

Type

Required

Default

Description

tiers

TicketTier[]

Required

—

Tier cards to render; available=0 marks a tier sold out.

selectedId

string

Optional

—

Id of the currently selected tier (single selection).

onSelect

(id: string) => void

Optional

—

Called with the tier id when a radio is activated.

locale

"fr" | "en"

Optional

'fr'

Locale for built-in labels (radiogroup name, remaining, fees, select, selected).

className

string

Optional

—

Extra classes appended to the list wrapper.

Quick use:<TicketTierList />

Accessibility

ARIA roleradiogroup

Usage

Import

tsxSnippet

import { TicketTierList } from "@epasslive/design-system"

Example 1

tsxSnippet

<TicketTierList tiers={tiers} selectedId={selected} onSelect={setSelected} locale="fr" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not use for quantity-based cart flows — render TicketSelector per tier instead