Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when a checklist is split into groups: tabs whose text shows each group's progress (such as Security 2/4), real checkboxes in each panel and an overall progress bar with a spoken total.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for setup or launch checklists with two to five groups of three to eight tasks, where people want to see what is left in each group at a glance.
Do not use it for a single list (use a plain checklist) or for tasks with owners and due dates, which need a table.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
groups | ChecklistGroup[] | - | Each has an id, name and tasks ({ id, text, done? }). |
label | string | - | Accessible name of the carousel. |
onChange | (done: string[]) => void | - | Called with every completed task id whenever one is toggled. |
The pattern ships with a Testing Library test (checklist-tabs-progress.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.