Animated File Upload
Animated React drag-and-drop file upload component with animated file list, validation states, and smooth drag-over transitions.
Drag & drop or click to upload
image/*, .pdf, .doc, .docx • Max 10.0 MB
Installation
npx smoothui-cli add animated-file-uploadFeatures
- Drag-and-drop file upload zone
- Click to browse files
- Animated drag-over state
- File list with animated add/remove
- File size validation
- MIME type filtering
- Single or multiple file support
- Accessible with proper ARIA attributes
- Respects reduced motion preferences
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
Enter / Space | Open file browser |
Tab | Navigate between drop zone and file items |
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
role="button" | Drop zone | Identifies the clickable upload area |
aria-label | Drop zone | Describes the upload action |
aria-label="Selected files" | File list | Identifies the file list |
aria-label | Remove button | Announces which file will be removed |
role="alert" | Error message | Announces validation errors |
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, drag animations and file list transitions are disabled.
Props
Accordion
Animated React accordion with smooth expand/collapse transitions. Accessible, keyboard-navigable FAQ component built on Radix UI with Motion animations.
Animated Input
React text input with smooth focus animations, floating labels, and visual feedback. Modern form input component with Motion transitions for better UX.