## Selectable Grid (S—204)

A photo grid with selection mode: tap to pick, Shift-click a range, drag across tiles, then act on the selection.

- URL: https://sundaeui.dev/components/selectable-grid
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/selectable-grid.json`
- Tags: grid, photos, gallery, bulk, multi-select, selection

Tap “Select” (or long-press a tile) to enter selection mode. Click picks a tile, Shift-click picks everything between, and dragging across tiles paints a selection.
An action bar slides in with the count, Select all and a delete that leaves an undo. Escape exits selection mode.

### Usage

```tsx
import { SelectableGrid } from '@/components/sundae/selectable-grid'

<SelectableGrid />
```

### Props

- `items` (`{ id: string; label: string }[]`, required): Tiles.
- `columns` (`number`, default `3`): Columns.
- `onDelete` (`(ids: string[]) => void`): Bulk delete.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Photo libraries, file managers, media pickers.

### When not to use

- Picking exactly one item: use a radio grid.

### Accessibility

- In selection mode tiles are checkboxes with aria-checked; the grid is a labelled group.
- Ctrl/⌘+A selects all; the count is announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Shift + click: Select a range
- ⌘/Ctrl + A: Select all
- Escape: Leave selection mode