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

PropTypeDefaultDescription
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) => voidCallback when item status is changed
onExport() => voidCallback when export button is clicked
classNamestringAdditional CSS classes for the container

ComplianceItem Type

PropTypeDefaultDescription
id*stringUnique item identifier
category*stringCategory for grouping items
requirement*stringRequirement text
status*ComplianceStatusCurrent status
descriptionstringOptional detailed description
evidencestringOptional 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 components

This 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 bar

Keyboard Navigation

KeyAction
TabNavigate between interactive elements
Enter / SpaceToggle 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