FileDropzone

A native-picker-first file intake surface with drag parity, validation, and app-owned upload state.@gemologic/sheen · forms

Playground

label

Documents

Choose filesDrag files here or choose from this device.

<FileDropzone label="Documents" accept=".pdf,text/plain" multiple items={[]} onFilesSelected={files => queueUploads(files)} />

Variant matrix

Document intake

Documents

Choose filesDrag files here or choose from this device.

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/FileDropzone.tsx

Tokens

--sheen-color-bg-subtle
--sheen-color-bg-hover
--sheen-color-bg-raised
--sheen-color-border
--sheen-color-border-control
--sheen-color-fg
--sheen-color-fg-muted
--sheen-color-fg-subtle
--sheen-color-accent-fg
--sheen-color-accent-subtle
--sheen-color-success-fg
--sheen-color-danger-fg
--sheen-color-focus-ring
--sheen-color-focus-ring-offset

Accessibility

Role: native file input and selected-file listKeyboard: Tab, Enter, Space

Do

Expose app-owned text status for every queued, uploading, complete, or failed item.

Do not

Do not make dropping the only way to select files or start transport inside the component.

Generated props

Name	Type	Default	Description
`ref`	`HTMLDivElement \| ((element: HTMLDivElement) => void)`	—	Native root reference.
`inputRef`	`HTMLInputElement \| ((element: HTMLInputElement) => void)`	—	Native file-input reference.
`label` *	`string`	—	Required visible field label.
`description`	`string`	—	Supporting requirements associated with the intake surface.
`chooseLabel`	`string`	—	Visible native picker action; defaults to the localized message.
`dropLabel`	`string`	—	Visible and announced active-drag instruction.
`accept`	`string`	—	Comma-separated native accept hint, also enforced for dropped and selected files.
`multiple`	`boolean`	`false`	Allows more than one file in each native selection; defaults to one.
`capture`	`"user" \| "environment"`	—	Native device capture hint.
`maxFiles`	`number`	—	Positive total item limit, including app-owned existing items.
`maxSize`	`number`	—	Positive maximum file size in bytes.
`validateFile`	`(file: File) => string \| null`	—	Optional synchronous app validation returning an error message or null.
`items`	`readonly FileDropzoneItem[]`	—	Serializable app-owned upload records with stable IDs, visible status text, and optional progress.
`onFilesSelected` *	`(files: readonly File[]) => void`	—	Receives accepted browser File objects; the app starts and owns transport.
`onFilesRejected`	`(rejections: readonly FileDropzoneRejection[]) => void`	—	Receives count, size, type, and custom validation failures.
`onRemove`	`(id: string) => void`	—	Optional app-owned removal action by stable item ID.
`onRetry`	`(id: string) => void`	—	Optional app-owned retry action shown for error items.
`disabled`	`boolean`	`false`	Disables picker, drop, actions, and selection callbacks.
`readOnly`	`boolean`	`false`	Keeps files inspectable while rejecting picker, drop, retry, and removal.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.