Reference
<tl-checkout-holders>
The checkout's "Who is this for?" section: a name for each guest, vehicle or group the cart makes, and who each add-on goes to, "one each" when that is automatic.
| HTML tag | <tl-checkout-holders> |
| React | import { TlCheckoutHolders } from '@ticketlayer/elements-react' |
| Category | Checkout |
| Runs in | web (browser DOM), native (planned React Native set) |
The checkout's "Who is this for?" section: a name for each guest, vehicle or group the cart makes, and who each add-on goes to, "one each" when that is automatic. Every change is saved at once and a refusal is said beside the add-on it is about. Renders nothing when the cart has nobody to name.
<tl-checkout-holders></tl-checkout-holders>Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
heading | heading | The section's heading. | string | 'Who is this for?' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-checkout-holders__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlError | Emitted when a change is refused or the holders cannot be loaded, with the message shown. | CustomEvent<{ message: string; }> |
tlHoldersSaved | Emitted after names or add-on choices are saved, with how many are named and how many add-ons are still to place. | CustomEvent<TlHoldersSaved> |
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.