Form Elements
File Upload
File upload allows users to upload and attach one or more files. It shows the upload progress and status of each file.
Examples
Drop file here
File type: PDF JPG PNG · Max size: 5 MB
Or
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- Keyboard accessible file input with Tab + Enter/Space to open file browser
- Drag-and-drop with full keyboard fallback via "Choose Files" button
- Clear focus indicators on the button (2px ring, #4a2bc2)
- Screen reader announces file selection, file name, size
- Error messages announced via ARIA live regions
- Remove buttons have descriptive aria-label per file
- Format and size constraints visible before upload (WCAG 3.3.2)
When to use this component
✓Do's
- •Collecting documents (Aadhaar, PAN, photos, PDFs)
- •Single or multiple file selection is needed
- •Drag-and-drop UX is a requirement
- •File format and size constraints must be communicated
✗Don'ts
- •If users need to enter text, use an Input or Textarea.
- •If users need to capture photos, use a Camera component.
- •If large files need to be uploaded, use a dedicated file upload service with chunked uploads.
Do's and Don'ts
✓ Do's
Drop file here
File type: PDF JPG PNG · Max size: 5 MB
Use the brand-purple dashed dropzone and show format + max size before upload to prevent failed attempts.
✗ Don'ts
Don't use a raw file input without constraints shown, users don't know what's accepted.