Dropzone

A drag-and-drop zone for uploading files.

Examples

State

Multiple

State

Disabled

Upload documentsPDF, DOCX, or Images up to 5MB

import { Dropzone } from 'kalki-design'

<Dropzone>Click me</Dropzone>

npx kalki-design add dropzone

import { Dropzone } from 'kalki-design'

export default function Example() {
  return <Dropzone />
}

Name	Type	Default	Description
Name`onFilesAdded`	Type`(files: File[]) => void`	Default`—`	DescriptionCallback fired when files are selected or dropped.
Name`files`	Type`DropzoneFile[]`	Default`—`	DescriptionList of currently selected files.
Name`onFileRemove`	Type`(id: string) => void`	Default`—`	DescriptionCallback fired when a file is removed.
Name`multiple`	Type`boolean`	Default`true`	DescriptionWhether multiple files can be selected.
Name`accept`	Type`string`	Default`—`	DescriptionComma-separated list of accepted file types (e.g., "image/*, .pdf").
Name`maxSize`	Type`number`	Default`—`	DescriptionMaximum file size in bytes.
Name`disabled`	Type`boolean`	Default`false`	DescriptionWhether the dropzone is disabled.
Name`label`	Type`string`	Default`'Click or drag files to upload'`	DescriptionPrimary textual instruction.
Name`description`	Type`string`	Default`—`	DescriptionSecondary instructional text.