Skip to main content

GroupBookingForm

Implemented

Group booking attendee-roster builder — one card per participant (full name required, optional email + accessibility note), fully controlled through attendees/onAttendeesChange. « Add attendee » disables at maxAttendees; per-row « Remove » hides at minAttendees; parent passes a pre-formatted totalLabel preview. FR/EN copy via locale prop (inline i18n, SeatMapLegend precedent).

Categoryorganisms
Sourcecomponents/organisms/groupbookingform/GroupBookingForm.tsx
AI HintUse for the storefront group-checkout roster (N named attendees per order) or any guest-list editing surface. The organism owns zero network calls — the parent owns the attendees array, the count bounds and the formatted totalLabel. Not a quantity stepper: one distinct card per participant.

Formulaire de réservation de groupe avec ajout/retrait de participants et besoins d'accessibilité par ligne. FR-CA : « Réservation de groupe · Participants · Besoins d'accessibilité · Total estimé ».

GroupBookingForm

Organism — Commerce family (Family 7)

Formulaire dynamique. Chaque participant (1 ligne) comprend Nom, Courriel optionnel, Besoins d'accessibilité. Bouton Ajouter un participant désactivé au max.

Réservation de groupe — Festival Jazz MTL — Quartet

Minimum 2 participants · maximum 20.

  • Participant 1

  • Participant 2

  • Participant 3

Total estimé : 192,00 $ · 3 × 48,00 $ + frais

This component supports light and dark mode.

Props

Prop
Type
Default
Description
eventTitle*
string
—

Titre de l'événement affiché.

minAttendees*
number
—

Nombre minimum.

maxAttendees*
number
—

Nombre maximum.

attendees*
GroupBookingAttendee[]
—

Participants actuels.

onAttendeesChange*
(next) => void
—

Mise à jour du tableau.

totalLabel
string
—

Total pré-calculé par le parent.

locale
"fr" | "en"
—

Bascule des libellés (FR défaut).

className
string
—

Classes additionnelles sur le wrapper.

Props

Preview

GroupBookingForm

Prop
Type
Required
Default
Description
eventTitle
string
Required
—

Event title appended to the section heading.

minAttendees
number
Required
—

Roster floor — per-row Remove hides when the count is at or below it.

maxAttendees
number
Required
—

Roster cap — Add attendee disables when the count reaches it.

attendees
GroupBookingAttendee[]
Required
—

Controlled roster rows: { id, fullName, email?, accessibility? }.

onAttendeesChange
(next: GroupBookingAttendee[]) => void
Required
—

Emits the next full array on every field edit, add and remove.

totalLabel
string
Optional
—

Pre-formatted total preview rendered in the footer (parent-computed).

locale
"fr" | "en"
Optional
'fr'

Locale used for formatting and translated strings.

className
string
Optional
—

Additional classes merged onto the section wrapper.

Quick use:<GroupBookingForm />

Accessibility

ARIA rolesection

Type

1 rule

NASA Rule 5

attendee count bounded: add disabled at maxAttendees, remove hidden at minAttendees

validation

1 rule

NASA Rule 7

fullName native required per attendee; email optional via native type=email

ARIA

1 rule

WCAG 4.1.2

<section aria-labelledby> ties the heading; label-wrap inputs; remove buttons expose aria-label with attendee name or index

Usage

Import

tsxSnippet
import { GroupBookingForm } from "@epasslive/design-system"

Example 1

tsxSnippet
<GroupBookingForm eventTitle="Opéra" minAttendees={2} maxAttendees={20} attendees={roster} onAttendeesChange={setRoster} totalLabel="192,00 $" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

Design System v4.1.0 | ePassLive