All components (244)

Drag selection

Choice · DragSelectArea

What it is and when to use it

An area in which several items are selected by dragging a rectangle with the mouse or finger, as in a file explorer.

When to use it

A grid of files, photos or cards from which many are selected at once.
Each selectable item carries data-select-key with its key; the rest of the content is not selected. selected and onSelectionChange are the selection.
Shift or Control at the start add to what was there; a click on the background clears it. Starting on an item does not drag, so as not to steal its click.
With the keyboard, Control+A selects everything and Escape clears it (and cancels a drag in progress).

When not to

As the only way of selecting: not everyone can drag. Each item must also be selectable on its own, with a checkbox or a button.
Ordered lists: SelectableList.

Keyboard: Control+A and Escape inside the area; each item with its own control.

Accessibility: the area is a named group and carries an explanation of how it is used; what ends up selected is announced.

Fine appearance: the rectangle carries the accent border and a very soft background; while dragging no text is selected.

What it looks like

Drag to select several. Control+A selects them all and Escape clears the selection.

Ring

Bracelet

Necklace

Earrings

Brooch

Watch

Chosen: Necklace.

<DragSelectArea label="Collection products" selected={elegidas} onSelectionChange={setElegidas}>
  <div data-select-key="ring">Ring</div>
  <div data-select-key="pulsera">Bracelet</div>
  <div data-select-key="collar">Necklace</div>
</DragSelectArea>

Props

Import it with import { DragSelectArea } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	What can be selected. Each item carries `data-select-key` with its key; the rest is not selected.
`label`required	`string`	What is being selected («Album photos»). Required.
`onSelectionChange`required	`(keys: readonly string[]) => void`	—
`selected`required	`readonly string[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech:

Interactivo