Drag a box across items to select them, as on a desktop. Caught items dip and keep an outline.
Drag across the files, or click one. Hold Shift to add more.
pnpm dlx shadcn@latest add @latheui/selection-areaPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Selection Area is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native div attributes. Lay the items out with className: grid, flex or anything else.
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | Accessible name of the group of items. |
| value | string[] | — | Controlled selection, as item ids. |
| defaultValue | string[] | [] | Initial selection when uncontrolled. |
| onValueChange | (value: string[]) => void | — | Called as the selection changes, including during a drag. |
Also accepts motion.div props. Selected items carry data-selected for styling.
| Prop | Type | Default | Description |
|---|---|---|---|
| id* (required) | string | — | Unique within the area. |
| children* (required) | ReactNode | — | The item's content. |
<SelectionItem id={photo.id} className="overflow-hidden data-selected:opacity-80 data-selected:ring-chart-2">
<img src={photo.src} alt={photo.alt} />
</SelectionItem>const [selected, setSelected] = React.useState<string[]>([])
<SelectionArea label="Photos" value={selected} onValueChange={setSelected}>{items}</SelectionArea>
<Button disabled={selected.length === 0} onClick={() => remove(selected)}>
Delete {selected.length || ""}
</Button>