# File Drop

> Files in: an empty slot with a dashed edge. While a file is over it, it takes the selection look and says "Drop to add". A press anywhere on it opens the picker.

- Name: `file-drop`
- Status: beta
- Categories: dates, forms
- File: the install writes `file-drop.tsx` to your `ui` alias, `@/components/ui` by default.
- Other registry items: `@arbokui/motion`. The install adds them.
- Gallery: https://arbokui.com/components/file-drop
- Registry item: https://arbokui.com/r/file-drop.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/file-drop
   ```

## Use it for

- Bringing files in, like a member list, an order list, or a team photo.
- Say what it is in title: "Drop your member list here". Say the types and the limit in hint: "CSV or Excel · up to 10 MB".
- The parent keeps the file list and does the uploading. Show each file in a file row.
- accept is checked for dropped files too, and multiple keeps only the first when it is off. Files of another type are left out, and it says so in red.
- Check size and contents on your server too. It only reads what the browser gives it.

## Avoid it for

- A person's own photo. Use a photo field, which places and crops it.
- A link or text to paste. Use an input.

## Props

- `onFiles`: `(files: File[]) => void`. The files picked or dropped, already checked against accept and multiple.
- `accept`: `string`. The types it takes, like ".csv,.xlsx" or "image/\*". The picker shows only these, and drops are checked too.
- `multiple`: `boolean`. Default `false`. Takes several files at once. Off, it keeps the first.
- `title`: `ReactNode`. Default `"Drop a file here"`. Say what it is: "Drop your member list here".
- `action`: `ReactNode`. Default `"choose a file"`. The words of the button that opens the picker.
- `dropTitle`: `ReactNode`. Default `"Drop to add"`. Shown while a file is over it.
- `hint`: `ReactNode`. The types and the limit, like "CSV or Excel · up to 10 MB".
- `size`: `"sm" | "md" | "lg"`. Default `"md"`. Padding and text size.
- `disabled`: `boolean`. Default `false`. Blocks the picker and drops. A file dropped on it is still caught, so the browser never opens it instead.
- `className`: `string`. Classes for the zone.

## Accessibility

- The one Tab stop is the "choose a file" button. Its description is the title and the hint, so it is heard as "choose a file, Drop your member list here".
- A press anywhere on the zone opens the same picker, for the mouse and touch.
- A polite status says what was added, like "Added Members 2026.csv".
- Files of another type are left out, and a red message says so once.
- While a file is over it, the dashed edge turns solid, so forced-colors mode shows the change too.

## Examples

### A member list

```tsx
<FileDrop
  title="Drop your member list here"
  hint="CSV or Excel · up to 10 MB"
  accept=".csv,.xlsx"
  multiple
  onFiles={(files) => console.log(files)}
/>
```