Task List Swipe Complete

ProNew

A to-do list with a checkbox in each row and a leading swipe to complete, a trailing swipe to delete, completed items sinking below with a live count. Use this when you build a task or checklist screen on a phone where completing items quickly matters.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when you build a task or checklist screen on a phone where completing items quickly matters.

Do not use it for projects with sub-tasks, assignees and dates (use a board) or for one-off confirmations.

Installation

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.

Props

Prop	Type	Default	Description
`tasks`	`Task[]`	`required`	`{ id, title, done? }`.
`onChange`	`(tasks: Task[]) => void`	`-`	Called after every change.

Accessibility

Each row has a real checkbox named by the task; swiping is only a shortcut for the same action.
The count ("2 of 3 done") is a polite status. Completed tasks keep their text, with a line-through plus the checked state, not colour alone.
Delete is reachable by keyboard through the row's arrow-key actions.

Testing

The pattern ships with a Testing Library test (task-list-swipe-complete.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when you build a task or checklist screen on a phone where completing items quickly matters.

Do not use it for projects with sub-tasks, assignees and dates (use a board) or for one-off confirmations.

Installation

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.

Props

Prop	Type	Default	Description
`tasks`	`Task[]`	`required`	`{ id, title, done? }`.
`onChange`	`(tasks: Task[]) => void`	`-`	Called after every change.

Accessibility

Each row has a real checkbox named by the task; swiping is only a shortcut for the same action.
The count ("2 of 3 done") is a polite status. Completed tasks keep their text, with a line-through plus the checked state, not colour alone.
Delete is reachable by keyboard through the row's arrow-key actions.

Testing

The pattern ships with a Testing Library test (task-list-swipe-complete.test.tsx) that drives it through roles and the keyboard.