Dropzone

File-drop affordance — a dashed drop target (label/hint/icon) that wraps a native file input; drag-over via data-active.

All components · Theme builder · Implementation source

Live preview

Open live dropzone preview

Install

Shell

netscript ui:add dropzone

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Dropzone } from '@app/components/ui/dropzone.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><Dropzone onFiles={(files) => report(`${files.length} files selected`)} /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`DropzoneProps`	`label`	`string`	Yes	Primary call-to-action text.
`DropzoneProps`	`hint`	`string`	Yes	Secondary hint (accepted types, size limits).
`DropzoneProps`	`icon`	`Renderable`	Yes	Leading glyph or icon node.
`DropzoneProps`	`active`	`boolean`	Yes	Active (drag-over) state.
`DropzoneProps`	`children`	`Renderable`	Yes	Typically a visually-hidden <input type="file">.
`DropzoneProps`	`accept`	`string`	Yes	Native accept string applied to drop, paste, and picker ingest.
`DropzoneProps`	`multiple`	`boolean`	Yes	Whether the dropzone accepts more than one file per ingest event.
`DropzoneProps`	`onFile`	`(file: File, details: DropzoneIngestDetails) => void`	Yes	Called with the first accepted file for simple single-file consumers.
`DropzoneProps`	`onFiles`	`(files: [object Object], details: DropzoneIngestDetails) => void`	Yes	Called with every accepted file from drop, paste, or picker ingest.
`DropzoneProps`	`onReject`	`(files: [object Object], details: DropzoneIngestDetails) => void`	Yes	Called with every rejected file from drop, paste, or picker ingest.
`DropzoneProps`	`onDrop`	`JSX.DragEventHandler<HTMLLabelElement>`	Yes
`DropzoneProps`	`onDragOver`	`JSX.DragEventHandler<HTMLLabelElement>`	Yes
`DropzoneProps`	`onPaste`	`JSX.ClipboardEventHandler<HTMLLabelElement>`	Yes
`DropzoneProps`	`class`	`string`	Yes

TypeScript

type DropzoneIngestSource = [object Object]
type DropzoneRejectedReason = [object Object]
DropzoneProps extends Omit<JSX.HTMLAttributes<HTMLLabelElement>, "class" | "onDrop" | "onDragOver" | "onPaste">

Keyboard

Presentation component; no component-specific keyboard interactions.

Tokens

Semantic contract roles: border/strong, border/width, destructive/text, primary/default, radius/card, surface/selected, surface/surface, text/muted.

CSS custom properties referenced directly: --ns-border, --ns-border-strong, --ns-card, --ns-destructive, --ns-ease-fast, --ns-fg, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-muted, --ns-muted-fg, --ns-primary, --ns-primary-subtle, --ns-radius-card, --ns-radius-full, --ns-radius-lg, --ns-ring, --ns-selected, --ns-space-2, --ns-space-6, --ns-space-9, --ns-surface, --ns-text-2xs, --ns-text-lg, --ns-text-sm.

Contract and compatibility

Accessibility pattern: native file input

Native DOM attributes pass through where the implementation accepts them.

Design contract values marked planned are not implementation props. The props above describe what ships today.