Evidence checklist

Lists evidence requirements, file records, and supplied verification status with controlled 44px action buttons.

Preview

Application evidence

Example records; changes last in this preview only

Proof of address
Required
Example-address.pdf
Awaiting review
Project plan
Required
File details not supplied
Not supplied

In action

Prepare your evidence

Fictional file records. Viewing a record does not submit or approve evidence.

Application evidence

Evidence review is not complete

Proof of address
Required by the provider
Example-address.pdfReceived 12 September
Awaiting review
Project plan
Required by the provider
Provide the document requested by the case team.
File details not supplied
Not provided

When to use

Use it for

Evidence requirements for permits, grants, benefits, and identity checks.
Provide explicit actions for working uploads, downloads, replacements, or record changes through the host callback.

Not for

Marking evidence accepted from a filename or a button click, or inferring requirements from missing values.
Treating uploads as submitted before the host confirms them, or rendering dead action buttons without a callback.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { EvidenceChecklist } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/evidence-checklist.

2. Vendor the source

npx @noorddev/vlak-cli add evidence-checklist

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/evidence-checklist.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { EvidenceChecklist } from "@noorddev/vlak-react";

<EvidenceChecklist label="Application evidence" items={[{ id: "address", label: "Proof of address", requirement: "Required by the provider", fileName: "Example-address.pdf", status: "Awaiting review" }]} />

// To enable actions, supply item.actions and onAction(itemId, actionId).
// The host performs uploads or changes and supplies pending and updated status.

Props

EvidenceChecklist

Evidence requirements, file records, and verification status with controlled action requests.

Prop	Type	Default	Description
`label`required	`string`
`items`required	`readonly EvidenceChecklistItem[]`
`summary`	`ReactNode`		Application-supplied coverage summary; the component does not count approvals.
`emptyLabel`	`ReactNode`	`"Evidence requirements not supplied"`
`onAction`	`(itemId: string, actionId: string) => void`		Requests an action only; uploads, removals, and resulting statuses belong to the caller.

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onAction">.

Keyboard

Keys	Does
`Tab`	Moves between enabled evidence action buttons when onAction and item actions are supplied.
`Enter, Space`	Requests the focused item action without mutating the displayed record. Pending or disabled actions cannot be activated.

Accessibility

Action names contain the visible label and evidence name; descriptions include requirement, file record, and supplied status.
Record status uses a polite atomic status region. Pending text remains visible and actionable controls are disabled without hiding the existing status.
No checkboxes or completion percentage are invented from verification status. Missing requirements or file details are explicitly labelled.
Buttons have at least 44px targets. Native root attributes, className, style, and div refs pass through.

Markup

<div class="rs-evidence-checklist" role="group" aria-label="Application evidence"><p class="rs-evidence-checklist-heading">Application evidence</p><ul class="rs-evidence-checklist-list"><li class="rs-evidence-checklist-item"><div class="rs-evidence-checklist-head"><p class="rs-evidence-checklist-label">Proof of address</p><span class="rs-evidence-checklist-requirement">Required by the provider</span></div><div class="rs-evidence-checklist-record">Example-address.pdf</div><div class="rs-evidence-checklist-status" role="status">Awaiting review</div></li></ul></div>

Classes

.rs-evidence-checklist.rs-evidence-checklist-heading.rs-evidence-checklist-summary.rs-evidence-checklist-list.rs-evidence-checklist-item.rs-evidence-checklist-head.rs-evidence-checklist-label.rs-evidence-checklist-requirement.rs-evidence-checklist-detail.rs-evidence-checklist-record.rs-evidence-checklist-status.rs-evidence-checklist-actions.rs-evidence-checklist-action.rs-evidence-checklist-empty

Depends on

/button