Picker Features
Selection panel, mobile experience, availability states, and notices
Selection Panel
The Selection Panel appears on the right side of the Picker (on desktop) and shows everything you've selected so far.
Header
Shows a cart icon, "Your Selection" title, and an item count (e.g., "3 items").
Selected Items
Each selected item shows:
Row seats — Row label, seat label, characteristic badges (accessible, restricted view), custom metadata, pricing category color swatch with label and price.
Table seats (individual booking) — Table label, seat label, custom metadata, pricing category and price.
Whole tables — Table label, number of people (if per-person pricing). For multi-category bookings, each category is listed with its quantity and subtotal, followed by a total line.
Areas — Area label, custom metadata. For multi-category bookings, each category shows quantity and subtotal. Single-category bookings show category, quantity multiplier, and total price.
Each item has a remove button (X) on the right side.
Footer
- Total — sum of all item prices, formatted in the layout's currency
- Proceed button — advances to the next step (disabled when selection is empty or proceeding is not allowed)
- Clear Selection — removes all items at once
If some items don't have pricing information, a note appears: "Some selected items do not have a displayed price yet."
Mobile Experience
On mobile devices, the Picker adapts its layout:
Bottom Drawer
The Selection Panel is presented as a bottom drawer that slides up from the bottom of the screen:
- Maximum height of 60% of the viewport
- Rounded top corners with a drag handle bar
- Tap the backdrop (dimmed area behind the drawer) to close
- Smooth 300ms slide animation
Mobile Pricing Popups
When you tap a seat, area, or table on mobile, the pricing popup renders as a centered modal (fixed position) rather than appearing next to the tapped item. This ensures the popup is always fully visible regardless of where you tapped.
Availability States
Items in the Picker can be in different availability states:
| State | Visual | Can Select? |
|---|---|---|
| Available | Normal appearance with pricing category color | Yes |
| Unavailable | Dimmed with red "Unavailable" badge in tooltip | No |
| Unbookable | Dimmed with gray "Unbookable" badge in tooltip | No |
| No valid pricing | Dimmed (treated as unavailable when pricing is required) | No |
- Unavailable means the item has already been booked or the organizer has marked it as not available for this event.
- Unbookable means the organizer has permanently blocked this item from booking (e.g., a seat that's structurally unusable).
- No valid pricing occurs when the Picker requires pricing categories but none are assigned to the item.
Notices
The Selection Panel supports notice banners that the integrating application can display to communicate information to the user. There are two notice positions:
- Cart top — appears at the top of the selection list, below the header
- Before proceed — appears in the footer area, just above the Proceed button
Each notice can be styled as info, warning, error, or success, and may include:
- A title and optional description
- A dismiss button (if the notice is dismissable)
- An action button (for custom interactions)
Notices are controlled by the application embedding the Picker — they are not part of the layout configuration.
Next Steps
- Selection Types — detailed guide to selecting seats, areas, and tables
- Picker Overview — general introduction