Inputs
Orbit drop zone
Orbit drop zone: Validate a selected file, simulate upload progress, and retain a removable attachment result.
Using Orbit drop zone
Validate a selected file, simulate upload progress, and retain a removable attachment result. Use onFileSelected, onUploadComplete, onUploadCancel, onUploadError, and onAttachmentRemove to observe the React lifecycle.
Orbit drop zone uses the card preview frame with a light/dark theme setting.
Choose a supported file within the size limit, wait for completion, then remove the attachment.
Progress is simulated and no file bytes leave the browser. Connect the descriptor callbacks to a real upload service in the host.
Customize the preview
These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.
| Control | Type | Default | Preview limits |
|---|---|---|---|
accent | color | #38BDF8 | No additional limit in the metadata. |
maxSizeMb | number | 5 | From 1 to 50; step 1 |
uploadSeconds | number | 2 | From 1 to 6; step 0.5 |
acceptHint | select | Images | Options: Images, Documents, Any file |
How does the application receive changes?
Use onFileSelected, onUploadComplete, onUploadCancel, onUploadError, and onAttachmentRemove to observe the React lifecycle.
Which frameworks are available for Orbit drop zone?
Orbit drop zone is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.
What does Orbit drop zone depend on?
The React metadata lists these npm dependencies beyond React: motion.
What accessibility details are visible in Orbit drop zone?
The React source for Orbit drop zone includes: native elements (button, input); attributes and handlers (aria-hidden, aria-label, onKeyDown, tabIndex); explicit roles (status); key comparisons (Escape). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.
How does Orbit drop zone handle reduced motion?
Orbit drop zone reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: reduce ? undefined : { rotate: 360 }; reduce ? undefined : { rotate: arc.reverse ? -360 : 360 }; reduce ? undefined : { scale: [1, 1.05, 1] }. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.
