Reference
<tl-seat-preferences>
What a party prefers beyond how many: a price per ticket, an area, an aisle seat, wheelchair spaces and how together.
| HTML tag | <tl-seat-preferences> |
| React | import { TlSeatPreferences } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
What a party prefers beyond how many: a price per ticket, an area, an aisle
seat, wheelchair spaces and how together. Folded, it lists only what
differs from the default, each with a way to remove it. tl-best-available
on the same page follows it, wherever each is placed.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
eventId | event-id | The event, for its prices | string | undefined | undefined |
occurrenceId (required) | occurrence-id | The occurrence the preferences are for | string | undefined |
open | open | Start open rather than folded | boolean | false |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-seat-preferences__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlPreferencesChange | The preferences changed. maxPriceEach is fees included, in minor units | CustomEvent<{ maxPriceEach: number | null; areas: string[]; aisle: boolean; accessible: number; together: "row" | "rows" | "any"; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Used by: <tl-best-available>