Lasso Select
Drag a rectangle to select a group of cards. Free, MIT · Work and teams › Canvases, selection and budgets
Drag a rectangle over cards or files to select a group; the app then runs its bulk action on the ids. The lasso starts on empty space only (links, buttons, fields and items keep their own behaviour), measures only the registered items, once per frame, and commits on release; Escape restores the selection it started from. Every item also has a checkbox, and “Select multiple” turns taps into toggles on touch screens.
Installation
npx valyro-cli@latest add lasso-selectnpx shadcn@latest add https://valyro.xyz/r/lasso-select.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { LassoSelect } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
itemIds * | string[] | Every selectable id, in document order: the known set, the order of the result and the scope of Select all. | |
selectedIds | string[] | Selected ids. A change of it during a gesture cancels the gesture. | |
defaultSelectedIds | string[] | [] | Initial selectedIds when uncontrolled. |
onSelectedIdsChange | (ids: string[], detail: LassoChangeDetail) => void | Called with the new selectedIds when it changes. | |
hitMode | 'intersect' | 'contain' | 'intersect' | intersect (default): touching an item selects it; contain: the item must be fully inside the lasso. |
selectionMode | 'replace' | 'add' | 'toggle' | 'replace' | What a gesture does without modifier keys. Default replace. Shift adds, Ctrl / Cmd toggles (and wins). |
getItemRect | (id: string) => DOMRect | null | Viewport rectangle of an item, for layouts that know it better than the registered element (null: skip it). | |
disabledIds | string[] | [] | Ids that keep their state: a lasso, a toggle and Select all leave them as they are. |
showToolbar | boolean | true | Hides the toolbar (count, Select all, Clear, Select multiple). Default true. |
children | ReactNode | The items: elements that call useLassoItem(id). | |
labels | Partial<LassoSelectLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Sticker Board — A free composition of photos, stickers and notes to move and rotate
- Priority Budget — Share a fixed budget of points between items
- Calendar View — Event calendar
- Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
- Kanban Board — Task board
- Gantt Chart — Gantt charts with dependencies and drag to reschedule
- Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
- CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
- Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
- Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
- Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
- Course Path Navigator — Course map: modules, locks, progress and skills, a list on narrow screens
Previous: Sticker Board · Next: Priority Budget · All Work and teams