# FileDropzone

> Lets people drop files onto an area or browse for them.

- **Level**: molecule · **Status**: stable · **Role**: input
- **Import**: `import { FileDropzone } from "@rrios-forge/ui/molecules/file-dropzone";`
- **Source**: `packages/ui/src/molecules/file-dropzone`

Real <input type="file"> clipped behind the surface so click + keyboard work; drag/drop is layered on top, never the only interaction. The molecule never owns drag-state internally — the consumer wires onDragEnter/onDragLeave and flips dragging.

## Use it for

- Date field / file drop / slider → `DateField` / `FileDropzone` / `Slider`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `neutral` `info` `danger` | `neutral` | Which semantic colour family the element speaks in. |
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `dragging` | — | `true` `false` | `false` | Something is being dragged over it: the drop target lights up. |
| `invalid` | — | `true` `false` | `false` | Fails validation: a danger edge, announced as invalid; pair it with an error message. |
| `disabled` | — | `true` `false` | `false` | Not available: dimmed, skipped by the keyboard, ignores the pointer. |

## Stories

- [Playground](/?path=/story/components-molecules-filedropzone--playground) · frame: `/iframe.html?id=components-molecules-filedropzone--playground&viewMode=story`
- [Sizes](/?path=/story/components-molecules-filedropzone--sizes) · frame: `/iframe.html?id=components-molecules-filedropzone--sizes&viewMode=story`
- [Dragging](/?path=/story/components-molecules-filedropzone--dragging) · frame: `/iframe.html?id=components-molecules-filedropzone--dragging&viewMode=story`
- [Invalid](/?path=/story/components-molecules-filedropzone--invalid) · frame: `/iframe.html?id=components-molecules-filedropzone--invalid&viewMode=story`
- [Disabled](/?path=/story/components-molecules-filedropzone--disabled) · frame: `/iframe.html?id=components-molecules-filedropzone--disabled&viewMode=story`
- [With selected files](/?path=/story/components-molecules-filedropzone--with-selected-files) · frame: `/iframe.html?id=components-molecules-filedropzone--with-selected-files&viewMode=story`

## Decisions that name it

- ADR-028 — The label is not the fill
- ADR-030 — Axis vocabulary: one name, one meaning

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).