Drop zone

React component

Accept files through a native chooser or drag and drop.

Try it out

Use the live controls or open the Code tab to view and copy the example.

Project attachments

Drag and drop files here

PNG, JPG or PDF, up to 10 MB each. Files stay in this browser.

API reference

Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.

Prop	Type	Description
`accept`	`string \| undefined`	See the typed definition and working example for this option.
`multiple`	`boolean \| undefined`	See the typed definition and working example for this option.
`disabled`	`boolean \| undefined`	Disables interaction (or date matchers for DatePicker).
`maxSize`	`number \| undefined`Default: `10 * 1024 * 1024`	See the typed definition and working example for this option.
`name`	`string \| undefined`	Field name used in form submission.
`required`	`boolean \| undefined`	Participates in native form validation.
`onFilesChange`	`((files: File[]) => void) \| undefined`	See the typed definition and working example for this option.
`onReject`	`((message: string) => void) \| undefined`	See the typed definition and working example for this option.
`label`Required	`string`	A meaningful visible or accessible label.
`description`	`string \| undefined`	Supporting instructions associated with the control.
`error`	`string \| undefined`	Validation message; also sets aria-invalid.
`hideLabel`	`boolean \| undefined`	See the typed definition and working example for this option.

Accessibility & interaction

Use a persistent visible label and provide textual errors; native controls support keyboard input and browser form constraints.

Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.

Variants & implementation notes

Files remain local and are passed to onFilesChange. Type, count and maximum bytes are checked on both chooser and drop paths. No upload service, directory traversal or content scanning. Applications must submit callback files for drag-and-drop; native file FormData covers chooser selections only.

Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.