Data display

Checklist

Results of a set of checks, each passed, a warning or failed.

import { Checklist } from '@jsonresume/ui'Source(opens in a new tab)

Examples

ATS checks

2 passed1 warnings1 failed

Passed: Contact details present
Email, phone and location were found.
Passed: Standard section headings
Warning: Summary is long
92 words. Aim for under 60.
Failed: Missing dates on two roles
Add a start date to Hooli and Pied Piper.

Show code

checklist/ats.tsx

import { Checklist } from '@jsonresume/ui';

export default function ChecklistAts() {
  return (
    <Checklist
      summary
      label="ATS checks"
      items={[
        {
          status: 'pass',
          title: 'Contact details present',
          description: 'Email, phone and location were found.',
        },
        { status: 'pass', title: 'Standard section headings' },
        {
          status: 'warn',
          title: 'Summary is long',
          description: '92 words. Aim for under 60.',
        },
        {
          status: 'fail',
          title: 'Missing dates on two roles',
          description: 'Add a start date to Hooli and Pied Piper.',
        },
      ]}
    />
  );
}

Accessibility

Each result states its outcome in words ("Failed: …"), not only by icon color.

Props

Also accepts the attributes of the element Checklist renders.
Prop	Type	Default	Description
items required	CheckResult[]	–
label	string	Results
summary	boolean	false	Show pass / warn / fail counts above the list.