form
File Upload
Keyboard and drag-and-drop file selection surface.
Canonical sourcePreview
This newly registered component is fully installable and documented. Its dedicated interactive showcase is generated in the extended preview pass; use the canonical source and API contract below in the meantime.
Installation
$bash
npx neoncite@latest add file-upload
Dependencies
lucide-reactAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Extends the Neoncite classes without replacing semantic behavior. |
| onFilesChange | (files: File[]) => void | — | Receives selected or dropped files. |
| accept | string | — | Native file accept filter. |
| multiple | boolean | false | Allows multiple file selection. |
| …native / primitive props | varies | — | Forwards the underlying React/HTML props where exposed by the component type. |
States
- • default
- • hover
- • focus-visible
- • disabled
- • selected/checked/open where applicable
- • invalid when composed with validation
Accessibility
- • Uses native HTML semantics where practical; provide an accessible name for icon-only or content-dependent controls.
- • Neoncite focus-visible treatment must remain visible against OLED surfaces.
- • Decorative glow, scan, pulse, and transition effects must not be the only indication of state.
- • All non-essential animation must respect prefers-reduced-motion.
- • The drop zone is keyboard activatable and the hidden file input remains the native file-selection mechanism.
Keyboard interactions
Tab / Shift+TabMoves focus through interactive controls in document order.
Enter / SpaceActivates the focused control when supported by its native or primitive semantics.
Composition
- • Install with `npx neoncite add file-upload`; registry dependencies are resolved recursively.
- • Can be composed with other Neoncite primitives without a private styling runtime.
Token contract
--surface-0…3--hairline--foreground--muted-foreground--primary / --ringsemantic neon/glow tokens where usedSSR / hydration
Browser APIs are used only during interaction. Render the component normally during SSR and avoid invoking browser-only callbacks on the server.
RTL
Layout uses logical flow where practical; verify icon direction for directional controls in RTL products.