UX Pattern
Recipe Multi‑Select
Let users pick multiple items from a dense list without losing context. Built for speedrunners who need to queue actions fast.
The Problem
Traditional checkboxes break flow when you have 40+ recipes. Users scroll, forget what they picked, and re‑click. We needed a pattern that shows selection state inline and persists across scroll.
The Solution
Each row is a tap target. A single tap toggles selection with an instant violet border flash. Selected items float to a sticky footer bar that shows count and a clear-all pill. No modals, no context menus — everything is one thumb away.
Implementation Notes
- Use a
Setfor selection state — O(1) toggle and lookup. - Sticky footer uses
position: sticky; bottom: 0with a backdrop blur to stay readable over scrolled content. - Row highlight is a 1px ring —
ring-1 ring-[#8B5CF6]— that appears instantly on selection. - Keep the footer under 48px tall so it never obscures the last list item.
Accessibility
Every row is a role="checkbox" with aria-checked bound to selection state. The footer announces selection count changes via a live region.