SeatPicker

molecules

Read-only seat picker for the admin's preview of what customers will see. Same data shape as SeatMap, but no edit tools.

ARIA Role: application

Demo

Demo for SeatPicker (molecules)

Read-only seat picker for the admin's preview of what customers will see. Same data shape as SeatMap, but no edit tools.

Props

Prop	Type	Required	Default	Description
`eventId`	`string`	Yes	`—`
`maxSeats`	`number`	No	`8`

TypeScript Interface

interface SeatPickerProps {
  eventId: string;
  selectedSeats?: string[];
  maxSeats?: number;
  onSeatSelect?: (seatIds: string[]) => void;
  readOnly?: boolean;
}

Assertions (NASA Rule 5)

[type]maxSeats in [1, 20] (NASA Rule 2)(NASA Rule 2)
[aria]Same ARIA as SeatMap but read-only mode sets aria-disabled(WCAG 2.1.1)

Usage

Import

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

Basic

<Seatpicker />

With Variants

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