Compliance Checklist
Workflow
Block
Progress tracker with expandable categories, status filtering, and export capability for project setup, compliance frameworks, and workflow configuration.
Preview
Interactive checklist with categories and status tracking
Custom Compliance
6/10 requirements complete (60%)
Status Types
Four status states with color-coded indicators
✓Complete
✗Incomplete
⏱In Progress
—Not Applicable
Props
ComplianceChecklist component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
framework* | 'EU AI Act' | 'ISO 42001' | 'NIST AI RMF' | 'Custom' | — | Compliance framework name displayed in header |
items* | ComplianceItem[] | — | Array of checklist items to display |
onItemUpdate* | (id: string, status: ComplianceStatus) => void | — | Callback when item status is changed |
onExport | () => void | — | Callback when export button is clicked |
className | string | — | Additional CSS classes for the container |
ComplianceItem Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Unique item identifier |
category* | string | — | Category for grouping items |
requirement* | string | — | Requirement text |
status* | ComplianceStatus | — | Current status |
description | string | — | Optional detailed description |
evidence | string | — | Optional evidence text |
ComplianceStatus Type
'complete' | 'incomplete' | 'in-progress' | 'not-applicable'Usage
Import and implementation example
import { ComplianceChecklist } from '@/blocks/workflow/compliance-checklist'
export default function Example() {
const [items, setItems] = useState([
{ id: '1', category: 'Setup', requirement: 'Define objectives', status: 'complete' },
{ id: '2', category: 'Setup', requirement: 'Assign roles', status: 'in-progress' },
{ id: '3', category: 'Review', requirement: 'Approval workflow', status: 'incomplete' },
])
const handleUpdate = (id, status) => {
setItems(items.map(item =>
item.id === id ? { ...item, status } : item
))
}
return (
<ComplianceChecklist
framework="Custom"
items={items}
onItemUpdate={handleUpdate}
onExport={() => exportReport()}
/>
)
}Built With
3 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Framework support: EU AI Act, ISO 42001, NIST AI RMF, and custom frameworks
- Status tracking: Four states: Complete, Incomplete, In Progress, Not Applicable
- Progress overview: Visual progress bar with completion percentage
- Category grouping: Expandable/collapsible categories for organized viewing
- Status filtering: Filter items by status with quick-select buttons
- Export capability: Optional export button for generating reports
- Evidence display: Optional evidence text for each requirement
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Category toggle buttons are native button elementsStatus buttons are properly labeledProgress is shown as text in addition to visual barKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between interactive elements |
| Enter / Space | Toggle category expansion or change status |
Notes
- Status is communicated through both icon and text
- Progress percentage is displayed numerically
- Category headers show completion count
- Filter buttons show count per status