# Dropzone

A file drop target composed with the native Flood FileInput.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Dropzone } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Dropzone label="Project attachments" name="attachments" multiple accept=".pdf,image/*" />
    </FloodRoot>
  );
}
```

## Design notes

- The existing FileInput remains the real chooser and successful native form control. Dropping files dispatches the same selection flow: multiple appends and deduplicates; single selection keeps the first dropped file. Native form reset and per-file removal remain intact.
- The zone responds only to file drags and prevents navigation on file drop. Disabled fields reject drops. Translate label/description and FileInput action labels. The chooser remains keyboard accessible; dropping is an additional pointer workflow.
- accept guides the native chooser; the host must validate dropped file types, size and contents. Directories, remote transfer, progress, server upload and image processing are outside this control. No file contents are read. Available in 0.2.5.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `invalid` | `boolean` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
| `clearable` | `boolean` | `—` |
| `clearLabel` | `string` | `—` |
| `selectionLabel` | `string` | `—` |
| `removeFileLabel` | `string` | `—` |
| `onFilesChange` | `(files: readonly File[]) => void` | `—` |
| `label` | `string` | `Required` |
| `description` | `string` | `"Drop files here or choose from your device."` |
| `multiple` | `Inherited native HTML prop` | `true` |
| `Native HTML props` | `Omit<Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "value" \| "defaultValue" \| "children" \| "readOnly">, "onDragEnter" \| "onDragLeave" \| "onDragOver" \| "onDrop">` | `Forwarded` |