# Dropzone
> Cherry Dropzone component - a file input drop target with drag & drop, validation, and preview thumbnails.
Source: https://cherry.al/code/dropzone
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Dropzone
The Dropzone component is a file input rendered as a dashed drop target. It supports click-to-browse and drag & drop, validates files against `accept`, `$maxFiles`, and `$maxBytes`, and shows preview thumbnails with remove buttons for the selected files.
The upload itself stays in your hands: the component only manages the file list and hands you `File` objects.
For design guidelines and all interactive states, see the [Inputs](/inputs) design page.
```jsx
import React from "react";
import { Dropzone } from "cherry-styled-components";
export default function Page() {
return (
console.log(files)}
onFilesRejected={(rejections) => console.warn(rejections)}
/>
);
}
```
The inline variant is a compact horizontal row with a transparent background for embedding inside forms or modals. Without `multiple`, selecting a new file replaces the current one:
```html
```
## Properties
Bold primary prompt line. Defaults to `"Drag & drop files here"`.
Optional "or click to browse" sub-line beneath the prompt.
Optional smaller hint line for accepted types and limits.
Name of the Lucide icon shown in the rounded tile. `IconProps` is a string union of all Lucide icon names, not an object. Defaults to `"FileUp"`.
Compact horizontal variant with a transparent background.
Maximum number of files kept at once (with `multiple`).
Maximum size per file in bytes.
Called with the full current file list whenever it changes.
Called with the rejected files and a typed reason (`"type"`, `"size"`, or
`"count"`) so you can surface errors however you like, for example with a
Toast.
Native accept filter. Also enforced for dropped files, including `.ext` and
`type/*` patterns.
Allows selecting several files. Without it, a new file replaces the current
one.
Disables the whole control: click-to-browse, drag & drop, and the thumbnail
remove buttons stop working, and the drop target gets disabled styling. The
drop target also disables itself once the file limit is reached.
All other native input attributes (`name`, `id`, `form`, `required`, and so
on) are passed through to the hidden ``, and a `ref` is
forwarded to that same input.
## matchesAccept
The `matchesAccept(file, accept?)` helper the component uses to validate
dropped files is also exported. It checks a `File` against a comma-separated
`accept` string, supporting `.ext` suffixes, `type/*` wildcards, and exact MIME
types, and returns `true` when no `accept` string is given:
```jsx
import { matchesAccept } from "cherry-styled-components";
matchesAccept(file, ".pdf,image/*"); // true for report.pdf or photo.png
```