Reference
<tl-quantity-picker>
How many tickets: square buttons 1 to 5 and a 6+ dropdown up to the channel's limit, or a keypad for staff.
| HTML tag | <tl-quantity-picker> |
| React | import { TlQuantityPicker } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
How many tickets: square buttons 1 to 5 and a 6+ dropdown up to the
channel's limit, or a keypad for staff. Two are chosen to start with, and
layout="keypad" gives the keypad, for a counter. tl-best-available on
the same page follows the number chosen, wherever each is placed.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
layout | layout | Square buttons and a dropdown, or a keypad (for staff at a counter) | "buttons" | "keypad" | 'buttons' |
max | max | The most that may be chosen, when lower than the channel's limit | number | undefined | undefined |
occurrenceId (required) | occurrence-id | The occurrence the tickets are for | string | undefined |
quantity | quantity | The number chosen to start with | number | 2 |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-quantity-picker__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlQuantityChange | A number of tickets was chosen | CustomEvent<{ quantity: number; }> |
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>