# DropZone

> A styled drop target for files: a dashed, centered surface wrapping a native `<input type="file">`, so picking a file through the platform's own file picker works the moment the markup renders, with no script involved.

```ts
import { DropZone } from "@sdxc/ui";
```

Renders a native `<input type="file">` wrapped in a `<label>` styled as a
dashed, centered drop surface; a paired drag-and-drop mixin toggles the
`data-drop-target` attribute this surface's styling reacts to.

## Examples

```tsx
<DropZone name="attachments" multiple>
	{t("uploads.dropInstructions")}
</DropZone>
```

```tsx
<DropZone name="avatar" accept="image/png, image/jpeg" aria-label={t("profile.chooseAvatar")}>
	<ImageIcon aria-hidden />
</DropZone>
```

```tsx
<DropZone name="documents" multiple accept="application/pdf" required>
	<p>{t("uploads.dropHint")}</p>
</DropZone>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `name?` | `string` | Native `name` submitted with an enclosing form. |
| `accept?` | `string` | Comma-separated list of accepted MIME types or file extensions. |
| `multiple?` | `boolean` | Whether more than one file may be chosen at once. |
| `capture?` | `TagProps<"input">["capture"]` | Requests a specific camera where a mobile browser's picker offers one. |
| `required?` | `boolean` | Marks the control required for its enclosing form. |
| `disabled?` | `boolean` | Marks the control inert and excluded from the tab order. |
| `children?` | `RemixNode` | The zone's visible content — an icon, an instructional caption, or both — rendered inside the `<label>` that wraps the file input, so clicking it opens the picker and names the input via label association. |
| `parts?` | `PartsProps` | Per-part styling for this component's internally composed input. |

Also accepts everything in `TagProps<"label">`.