Build Assets
UI Component
Document Request List
A predefined checklist of required documents, each row with its own upload control, status, and preview.
Platform: bothTags: upload, checklist, kyc, onboarding, documents
Purpose
Collects a known set of documents (KYC, onboarding, applications). Listing the exact requirements upfront removes uncertainty; a per-row status makes remaining work obvious at a glance, and each row uploads independently so one document never blocks another.
Anatomy
- Header: title + uploaded/total counter
- One row per required document: name + Required badge + short description
- Uploaded file line: type icon + name + size
- Status pill: Not uploaded / Uploading / Uploaded / Needs attention
- Row actions: Upload, or View / Replace / Remove once uploaded
States
- Missing: neutral status, Upload button
- Uploading: progress + spinner
- Uploaded: check status, View/Replace/Remove
- Rejected: red row + specific reason
Do
- List every required document upfront so users know the full scope
- Show per-row status so remaining work is obvious
- Let each row upload and be replaced independently
- Explain rejections on the row, specifically
Don't
- Hide the full list behind a single generic uploader
- Block all uploads because one document is missing
- Signal status by color alone — pair with an icon + label
- Lose a user's uploaded files when one row errors
Accessibility
- Each row has its own labelled <input type="file">
- Status is icon + label, not color alone
- Progress and rejection reasons announced via aria-live
- Rows stack responsively so controls stay reachable on mobile