Loading…

Image Selector

beta

A photo grid with a Select mode: tick photos, see the count, share or delete them, and reset.

Forms
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add image-selector

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ImageSelector } from "@/components/ui/image-selector";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Start In Select Mode
Four Columns

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ImageSelector>

Prop	Type	Default
`images` (required)	`SelectableImage[]`	—
`defaultSelecting`	`boolean`	`false`
`defaultValue`	`string[]`	`[]`
`gridClassName`	`string`	—
`label` Accessible name of the photo group.	`string`	`"Photos"`
`onDelete` Called with the ids being deleted. They are also hidden until Reset.	`(ids: string[]) => void`	—
`onSelectingChange`	`(selecting: boolean) => void`	—
`onShare` Shows a Share button in the bar, called with the selected ids.	`(ids: string[]) => void`	—
`onValueChange`	`(value: string[]) => void`	—
`selecting` Whether Select mode is on (controlled).	`boolean`	—
`showReset` Show a Reset button that restores deleted photos and leaves Select mode.	`boolean`	`true`
`value` Selected image ids (controlled).	`string[]`	—

Plus every attribute of <div> except defaultValue, onChange, children.

Accessibility

The grid is a list named by `label`. In Select mode each photo is a native checkbox named by the image's alt text — Tab reaches each, Space ticks it — with a visible focus ring on the photo. The Select toggle exposes aria-pressed; the selection count is a polite live region. Share and Delete are named icon buttons that become aria-disabled (not disabled) with nothing selected, so focus stays put after a delete. Tick marks are aria-hidden. The reflow after a delete uses motion inside MotionConfig reducedMotion="user"; the rest is CSS and stops under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

images

SelectableImage[]

—

defaultSelecting

boolean

false

defaultValue

string[]

[]

gridClassName

string

—

label

Accessible name of the photo group.

string

"Photos"

onDelete

Called with the ids being deleted. They are also hidden until Reset.

(ids: string[]) => void

—

onSelectingChange

(selecting: boolean) => void

—

onShare

Shows a Share button in the bar, called with the selected ids.

(ids: string[]) => void

—

onValueChange

(value: string[]) => void

—

selecting

Whether Select mode is on (controlled).

boolean

—

showReset

Show a Reset button that restores deleted photos and leaves Select mode.

boolean

true

value

Selected image ids (controlled).

string[]

—