Reference
<tl-price-picker>
The ticket type of a held seat: Adult, Child, Concession and the rest of its category's types, as a dropdown or a segmented control, for one seat or every seat held for the occurrence.
| HTML tag | <tl-price-picker> |
| React | import { TlPricePicker } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
The ticket type of a held seat: Adult, Child, Concession and the rest of its category's types, as a dropdown or a segmented control, for one seat or every seat held for the occurrence. A change keeps the seat.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
eventId | event-id | The event, for its prices; without it the types the page has already read | string | undefined | undefined |
layout | layout | A dropdown per seat, or a segmented control with each price | "dropdown" | "segmented" | 'dropdown' |
occurrenceId (required) | occurrence-id | The occurrence the seats belong to | string | undefined |
seat | seat | One seat, by its index; unset for every seat held for the occurrence | number | undefined | undefined |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-price-picker__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | The change could not be made | CustomEvent<{ message: string; }> |
tlPriceChange | A held seat moved to another ticket type | CustomEvent<{ seat: number; ticketTypeId: string; }> |
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-cart>, <tl-seat-card>