ComponentsData display

Task list

Checkable tasks with assignee, due date, priority and subtasks: deal follow-ups, onboarding, an editorial checklist, project to-dos. Optimistic toggles that revert on failure, inline add and edit, overdue and due-today tones, and a progress header that is announced politely.

Checkbox + native lists components/task-list.tsxtheme · material · accent · density · font

Deal

Northwind renewal 2027

Follow-ups

1 of 5 done
  • Send revised quote with 12-month price lock
    Due November 12, 2026High priorityAssigned to Ayşe Kaya
  • Confirm SSO requirements with IT
    Due November 10, 2026Urgent priorityAssigned to Mehmet Yılmaz
  • Book on-site demo in Rotterdam
    Due November 15, 2026Medium priorityAssigned to Daniel Brooks
  • Share security questionnaire
    Due November 7, 2026Assigned to Mehmet Yılmaz
  • Draft order form
    Due November 21, 2026

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { TaskList } from "@vamos-ui/react";

<TaskList
  title="Follow-ups"
  items={tasks}
  onToggle={(id, done) => api.toggle(id, done)}
  onAdd={(title, parentId) => api.add({ title, parentId })}
/>

Drag reorder: wrap the list in the Sortable group when you need pointer dragging; onReorder already provides the keyboard alternative.

Examples

Pre-publish checklist (CMS)

variant="checklist": titles only, with optional hints; disabled items are system-checked.

Before publishing

3 of 6 done
  • Title under 60 characters
  • Meta description written
  • Featured image set (WebP, under 300 KB)
  • Alt text on every image

    3 of 7 images are missing alt text.

  • Internal links to two related posts
  • Slug checked by an editor

    Locked after the post was scheduled.

Onboarding with subtasks (HR)

children nest; parents show "2/3" and collapse. sortCompleted moves done items down.

Onboarding · Selin Arslan

3 of 9 done
  • Day 1 — Welcome
    Overdue · YesterdayAssigned to Zeynep Arıkan
    • Lunch with the design team
    • Laptop and badge handed over
    • Accounts: Google Workspace, Slack, Figma
  • Week 1 — Paperwork
    Due In 3 daysHigh priorityAssigned to Zeynep Arıkan
    • Signed employment contract
    • SGK registration
    • Bank details for payroll
  • 30-day check-in with manager
    Due Dec 14Assigned to Can Demir

Keyboard reorder (PRM)

onReorder enables Alt+↑ / Alt+↓ and receives the new sibling order.

Partner portal · Sprint 14

  • Wireframes for the partner portal
    Assigned to Selin Arslan
  • Commission rules spec
    High priorityAssigned to Ayşe Kaya
  • Partner onboarding emails
    Assigned to İlker Şahin
  • Payout export (CSV)
    Medium priority

Focus a checkbox and press Alt+↑ / Alt+↓ to move a task.

API

TaskList

PropTypeDefault
items
Tasks, with optional children.
TaskData[]—
onToggle
Optimistic; a rejection reverts the checkbox and shows a toast.
(id, done) => void | Promise<void>—
onAdd
Add input (Enter creates and keeps focus) and "Add subtask".
(title, parentId?) => void | Promise<void>—
onEdit
Inline title edit (pencil or double-click; Enter saves, Esc cancels).
(id, patch) => void | Promise<void>—
onRemove
Delete button per task.
(id) => void | Promise<void>—
onReorder
Alt+↑ / Alt+↓ on a task.
(ids, parentId?) => void | Promise<void>—
title
Heading; labels the group.
ReactNode—
variant
Rich meta or titles only.
"list" | "checklist""list"
showProgress
"3 of 7 done" and a bar.
booleantrue
hideCompleted / defaultHideCompleted / onHideCompletedChange
Header toggle, controlled or not.
boolean / boolean / (hide) => void—
sortCompleted
Done tasks below open ones.
booleanfalse
today
Reference day for due states (default: live clock in the provider time zone).
string | Date—
readOnly
No edits.
booleanfalse
labels
progress, hideCompleted, add, due, overdue, priority levels, empty, allDone, …
Partial<TaskListLabels>—

TaskData

PropTypeDefault
id / title / done
Basics.
string / string / boolean—
description
Second line.
string—
assignee
Avatar + first name; full name for screen readers.
{ id; name; avatar? }—
due
Due date.
YYYY-MM-DD—
priority
Flag; low is not shown.
"low" | "medium" | "high" | "urgent"—
children
Subtasks.
TaskData[]—
disabled
Can't be toggled or edited.
boolean—
Previous
Tag input
Next
Team