Required Documents Checklist

ProNew

Each required document (ID, proof of address) is its own slot with a clear state: missing, uploading, uploaded or rejected, with Replace, and the form shows "2 of 3 documents" and only continues when every required slot has a file. Use this when an application needs specific named files.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

An application or onboarding step requires particular documents, not just "some files".

Do not use it when: For arbitrary attachments, use a single file field with a list.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`slots`	`{ id, label, hint?, required? }[]`	The documents asked for.
`onContinue`	`(files: Record<slotId, File>) => void`	Called with the first file of each filled slot.

Accessibility

Each document is a list item with an icon, the label and its state as words ("Required", "Added", "Optional"), and a File Field with its own label, hint, rejection messages and keyboard support.
The summary "1 of 2 required documents added" is a polite status; Continue stays disabled until it is complete, and the status says "You can continue." when it is.
A rejected file is named in an alert inside its slot, so the person knows which document has the problem.

Testing

The pattern ships with a Testing Library test (document-upload-checklist.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

An application or onboarding step requires particular documents, not just "some files".

Do not use it when: For arbitrary attachments, use a single file field with a list.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`slots`	`{ id, label, hint?, required? }[]`	The documents asked for.
`onContinue`	`(files: Record<slotId, File>) => void`	Called with the first file of each filled slot.

Accessibility

Each document is a list item with an icon, the label and its state as words ("Required", "Added", "Optional"), and a File Field with its own label, hint, rejection messages and keyboard support.
The summary "1 of 2 required documents added" is a polite status; Continue stays disabled until it is complete, and the status says "You can continue." when it is.
A rejected file is named in an alert inside its slot, so the person knows which document has the problem.

Testing

The pattern ships with a Testing Library test (document-upload-checklist.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.