Checklist

Onboarding steps with a progress rail, ending in "You're set up".

SourcePackage @weft-js/warp

Preview

tsx

import { derived, state } from '@weft-js/core'import { Checklist } from '@weft-js/warp'export function SelfChecked() {  const done = state<string[]>([])  const toggle = (id: string, on: boolean) => (done.value = on ? [...done.value, id] : done.value.filter(x => x !== id))  const items = derived(() => STEPS.map(step => ({ ...step, done: done.value.includes(step.id) })))  return <Checklist title="Launch day" items={items.value} onToggle={toggle} />}const STEPS = [  { id: 'project', title: 'Create your first project', description: 'Projects hold your services and deploys.' },  { id: 'repo', title: 'Connect a repository', description: 'Deploy on every push to main.' },  { id: 'invite', title: 'Invite your team', description: 'Add teammates by email.' },]

Installation

npm install @weft-js/warp

Usage

tsx

import { Checklist } from '@weft-js/warp'

Getting started

Press Do it on each step to see the ending. In your app the items come from the server.

tsx

import { derived, state } from '@weft-js/core'import { Checklist, Toaster } from '@weft-js/warp'export function Setup() {  const done = state(['project'])  const finish = (id: string) => (done.value = [...done.value, id])  const items = derived(() => STEPS.map(step => ({ ...step, done: done.value.includes(step.id), action: { label: 'Do it', onClick: () => finish(step.id) } })))  return (    <>      <Checklist subtitle="Three steps to your first deploy." items={items.value} doneDescription="This card tidies itself away." onHide={() => {}} onUndoHide={() => {}} />      <Toaster />    </>  )}const STEPS = [  { id: 'project', title: 'Create your first project', description: 'Projects hold your services and deploys.' },  { id: 'repo', title: 'Connect a repository', description: 'Deploy on every push to main.' },  { id: 'invite', title: 'Invite your team', description: 'Add teammates by email.' },]

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`title`	`unknown`	`'Get set up'`	The heading.
`subtitle`	`unknown`	—	One line under it.
`items`	`ChecklistItem[]`	—	Derived from server state, never from clicks here: doing the task anywhere checks it.
`doneTitle`	`unknown`	`"You're set up"`	The heading once all are done.
`doneDescription`	`unknown`	—	One line under it.
`collapsible`	`boolean`	`false`	Folds on the title, for phones.
`footer`	`unknown`	—	A row under the list.

Event	Type	Default	Description
`onToggle`	`((id: string, done: boolean) => void)`	—	A user-checkable list instead; omit it and the boxes only report.
`onHide`	`(() => void)`	—	Shows Hide, and a toast with Undo.
`onUndoHide`	`(() => void)`	—	Undo for a hide.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="checklist"] [data-part="head"]

headtitlecountprogressitemsr-onlyactiondone

RelatedTour Coachmark