Docs
components
Dropzone

Dropzone

A drop zone is an area into which one or multiple objects can be dragged and dropped.

There is no native element to implement a drop zone in HTML. DropZone helps achieve accessible dropzone components that can be styled as needed.

Preview

Code

Drop files here

Installation

CLI

Copy & Paste

npx @sly-cli/sly add jolly-ui dropzone

Composed Components

A DropZone uses the following components, which may also be used standalone or reused in other components.

FileTrigger

A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.

Basic

Preview

Code

Drop files here

FileTrigger

To allow the selection of files from the user's device, pass FileTrigger as a child of DropZone.

Preview

Code

Drop files here

TimeField Checkbox