TaskList

Stripe TaskList

A checklist of work toward one outcome: a business verification, a provider setup, a Home page's “Get started”. Rows show Stripe's statuses — not started, in progress, blocked, complete — with an optional connector line, a progress header and sub-tasks that fold away once their parent is done.

pnpm add @zikzuk/ui

import { TaskList, TaskListItem } from "@zikzuk/ui";

Get started

Connector and progress header. Rows with onPress are buttons; the blocked row never is.

Get started1 of 4 tasks

Verify your business, CompleteApproved on 12 Oct 2026
Go live, BlockedAdd a bank account first

Sub-tasks, work under way and a failed check

A parent without a status takes it from its sub-tasks, and folds them behind “Show steps” once complete.

Identity check, CompleteComplete
Document review, In progressChecking your documents…
Test connection, FailedThe provider refused the API key

When to use

Setups, onboarding and “Get started” lists where order matters.
Any checklist of work where each row can open the task it names.
A blocked row says what it waits for in its second line; a failed check stays in progress with the reason in red.

Not for

A list of records — use List.
Navigation between pages — use links.

Props

TaskList

Prop	Type	Description
children	TaskListItem elements	Stripe's form. Or pass `tasks` as data.
tasks	TaskListTask[]	Rows as data (each a TaskListItem's props plus `key`).
connector	boolean Default `false`	A line joining the status circles; without it rows are separated by hairlines.
progress	boolean Default `false`	A header with a brand bar and “2 of 5 tasks”.
progressLabel	string Default `"Progress"`	The progress header's label.
noun	string Default `"task"`	Counted noun in “2 of 5 tasks”.
shimmer	boolean Default `false`	The in-progress row's detail shimmers.
announce	boolean Default `true`	Status changes are read out in a polite live region.
aria-label	string	Names the list for screen readers.
className	string	Extra classes on the outer element.

TaskListItem

Prop	Type	Description
title	ReactNode	The task.
status	"not-started" \| "in-progress" \| "blocked" \| "complete"	Stripe's status. Older kit states (pending, running, done…) are accepted. Without it, derived from subTasks.
detail	ReactNode	Second line: the answer when complete, the reason when blocked, what to do now.
error	boolean	The last attempt failed: the detail reads as the reason, in red.
onPress	(event) => void	Makes the whole row a button with a chevron. Blocked rows never are.
href	string	Without onPress: the title links here.
action	ReactNode	Without onPress: a control at the row's end.
selected	boolean	The task whose pane is open: aria-current="step", brand title.
disabled	boolean	Not pressable for now (while saving).
subTasks	TaskListSubTask[]	Nested tasks, indented and smaller.
shimmer	boolean	Override the list's shimmer for this row.