UploadCN
DocsComponentsExamples

Document Checklist

Collect a list of documents, insurance claims, onboarding, visas, loans. Each requirement is its own slot and ticks off when its file uploads.

"use client"

import { DocumentChecklist } from "@/components/document-checklist"

export default function DocumentChecklistExample() {
  return (
    <div className="w-full max-w-xl">
      <DocumentChecklist />
    </div>
  )
}

Installation

npx shadcn@latest add @uploadcn/document-checklist

Usage

import { DocumentChecklist } from "@/components/document-checklist"
<DocumentChecklist
  title="Onboarding documents"
  items={[
    {
      name: "contract",
      label: "Signed contract",
      accept: "application/pdf",
      required: true,
    },
    { name: "tax-form", label: "Tax form", required: true },
    { name: "photo", label: "Profile photo", accept: "image/*" },
  ]}
/>

Each file carries its requirement name in item.meta.slot, so your backend knows which document is which.

Props

Prop

Type

On this page

InstallationUsageProps