KQ-1136 · LASSO/GRID

Lasso Grid

A file grid with rubber-band selection: drag anywhere and a box (or, with Alt or mode="lasso", a freehand loop) follows the pointer 1:1, lighting every tile it catches and squeezing it a little on the snap spring while the band holds it. Let go and the band contracts onto what it caught on the same snap spring, one crisp overshoot like a rubber band let go around a bundle, while a count badge glides after the selection's corner on the glide spring. Arrow keys move and select in two dimensions, Shift+Arrow draws the same band from the keyboard and snaps it tight when Shift is released, Space toggles, Cmd/Ctrl+A selects all and Escape clears.

KQ-1136 · LASSO/GRID

Fernworks Spring shoot

12 items

2 selected · 9.4 mb

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/lasso-grid

Props

items: LassoGridItem[]; default —; The files, in reading order: id, name (the label and accessible name) and an optional kind — folder, image, doc, sheet, audio or video — that picks the glyph.
label: string; default —; The grid's accessible name.
value / defaultValue: string[]; default []; The selected ids, controlled or uncontrolled. A controlled grid shows the host's answer after each band, tap or key.
onValueChange: (value: string[]) => void; default —; Fires once per band (on release), per tap and per key, with the new selection in item order.
mode: "box" | "lasso"; default "box"; The band's shape: a rectangle, or a freehand loop that tightens into a box on release. Alt held as a drag starts draws the other one.
hit: "touch" | "contain"; default "touch"; Whether a tile is caught as soon as the band touches it, or only once the band encloses it.
badge: boolean; default true; A count badge that rides the top-right corner of the selection, gliding after it as it changes, its figure rolling.
sound: boolean; default false; A tick per tile as the band catches it, climbing a pentatonic step each time, and a tock on release. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the grid and blocks selection; arrow keys still move focus.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
items	LassoGridItem[]	—	The files, in reading order: id, name (the label and accessible name) and an optional kind — folder, image, doc, sheet, audio or video — that picks the glyph.
label	string	—	The grid's accessible name.
value / defaultValue	string[]	[]	The selected ids, controlled or uncontrolled. A controlled grid shows the host's answer after each band, tap or key.
onValueChange	(value: string[]) => void	—	Fires once per band (on release), per tap and per key, with the new selection in item order.
mode	"box" \| "lasso"	"box"	The band's shape: a rectangle, or a freehand loop that tightens into a box on release. Alt held as a drag starts draws the other one.
hit	"touch" \| "contain"	"touch"	Whether a tile is caught as soon as the band touches it, or only once the band encloses it.
badge	boolean	true	A count badge that rides the top-right corner of the selection, gliding after it as it changes, its figure rolling.
sound	boolean	false	A tick per tile as the band catches it, climbing a pentatonic step each time, and a tock on release. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the grid and blocks selection; arrow keys still move focus.
className	string	—	Merged onto the root's classes.