Checklist

A list of what has to happen before something is ready, with a link to fix each item. Items can show state from data, or be checkboxes the reader ticks for a manual list.

Checklist
ChecklistItem

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Checklist

Ready to go live

What the site needs before visitors see it.

1 of 4 done

Site address, done
Logo, to do
Shown in the header and in shared links.
Fix
Contact details, to do
An email address or a phone number.
Fix
Payment provider, to do
Needed before the shop can take orders.
Ask your administrator

Before the release

1 of 3 done

Tests pass
Changelog updated
List what changed for readers.
Version tagged

Open issues

Nothing to check yet.

Dark theme, Checklist

Ready to go live

What the site needs before visitors see it.

1 of 4 done

Site address, done
Logo, to do
Shown in the header and in shared links.
Fix
Contact details, to do
An email address or a phone number.
Fix
Payment provider, to do
Needed before the shop can take orders.
Ask your administrator

Before the release

1 of 3 done

Tests pass
Changelog updated
List what changed for readers.
Version tagged

Open issues

Nothing to check yet.

High contrast theme, Checklist

Ready to go live

What the site needs before visitors see it.

1 of 4 done

Site address, done
Logo, to do
Shown in the header and in shared links.
Fix
Contact details, to do
An email address or a phone number.
Fix
Payment provider, to do
Needed before the shop can take orders.
Ask your administrator

Before the release

1 of 3 done

Tests pass
Changelog updated
List what changed for readers.
Version tagged

Open issues

Nothing to check yet.

UsageLink to the section Usage

tsx

import { Checklist, ChecklistItem } from '@skribly/ui/onboarding'

tsx

<Checklist title="Ready to go live" doneLabel="done" todoLabel="to do"
  progressLabel={(done, total) => `${done} of ${total} done`}>
  <ChecklistItem title="Logo" hint="Shown in the header." actionLabel="Fix" href="/settings/logo" />
</Checklist>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A region named by its title, with the count in words.
Data rows read "done" or "to do" after the title and show a check or an empty circle; tickable rows are real checkboxes with the hint as description.
"Fix" links are named with their item.
Hints and links disappear once an item is done.

This demo runs through axe in all three themes on every test run. See what the tests check.