## Task List (S—200)

A to-do list: add with Enter, check off with a strike, filter All / Active / Done, clear completed, and undo a delete.

- URL: https://sundaeui.dev/components/task-list
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/task-list.json`
- Tags: checklist, todo, undo, tasks, list, productivity

Type and press Enter to add to the top. Checking a task strikes it through and moves it down; the counter shows what is left.
Deleting shows an Undo bar for five seconds. Filters and “Clear completed” sit in the footer.

### Usage

```tsx
import { TaskList } from '@/components/sundae/task-list'

<TaskList />
```

### Props

- `defaultTasks` (`{ id: string; text: string; done?: boolean }[]`): Starting tasks.
- `onChange` (`(tasks) => void`): Called with the list.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Personal to-dos, checklists inside a project, shopping lists.

### When not to use

- Team workflows with owners and stages: use a board.

### Accessibility

- Each task is a native checkbox with its text as label; delete buttons name the task.
- Count, filter results and undo are announced politely.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Enter: Add the task
- Space: Toggle the focused task