AccessibilitySeatSelector

Implemented

Accessibility-need seat selector — filters + seat map integration for reserved seating. Real organism implementation; the molecules placeholder twin was de-cataloged per ADR-035.

Categoryorganisms

Sourcecomponents/organisms/AccessibilitySeatSelector/AccessibilitySeatSelector.tsx

AI HintUse for atomic UI elements. Compose into molecules for complex interactions.

Multi-select accessibility option picker for the seat-selection flow. Renders a checkbox group with feature icons, an optional count, and a hint line. Used in the venue picker to capture wheelchair, companion, aisle, hearing-loop, visual-aid, and transfer seat preferences.

AccessibilitySeatSelector

Accessibility organism — Family 3 (Tier 3)

Fieldset with a checkbox group of accessibility options. Surfaces counts when provided and uses the semantic teal accent for the selected state.

Usage

AccessibilitySeatSelector is a single-select-by-id component that drives the accessibility-needs step of the seat-selection flow. Pass the venue's option list, the current selection, and a change handler. Selected options are rendered with the teal accent and a subtle teal wash.

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

<AccessibilitySeatSelector
  options={venue.accessibilityOptions}
  selected={selected}
  onChange={setSelected}
  legend="Accessibility needs"
/>

Accessibility

Wraps the options in a <fieldset> with an aria-label (aria-label) for assistive tech. Each checkbox is paired with a visually-hidden label that includes the option label, count, and description when present.

Props

Prop

Type

Default

Description

options*

AccessibilityOption[]

—

Options rendered as checkboxes. Each entry has id, label, optional description, optional icon, and optional count.

selected*

string[]

—

Currently selected option ids.

onChange*

(selected: string[]) => void

—

Fired with the new selection after the user toggles an option.

legend

string

—

Fieldset legend. Defaults to "Accessibility seating options".

hint

string

—

Optional hint line rendered under the legend.

className

string

—

Additional classes appended to the fieldset root.

id

string

—

Optional id for the fieldset root. Defaults to a useId-derived value.

Props

Preview

AccessibilitySeatSelector

Prop

Type

Required

Default

Description

options

AccessibilityOption[]

Required

—

Synced from source — no interface JSDoc yet; document on `AccessibilitySeatSelector.tsx`.

selected

string[]

Required

—

Synced from source — no interface JSDoc yet; document on `AccessibilitySeatSelector.tsx`.

onChange

(selected: string[]) => void

Required

—

Called when the value changes.

legend

string

Optional

'Accessibility seating options'

Synced from source — no interface JSDoc yet; document on `AccessibilitySeatSelector.tsx`.

hint

string

Optional

—

Alias for `helperText`.

Quick use:<AccessibilitySeatSelector />

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<AccessibilitySeatSelector />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms