Task
The Task component provides a structured way to display task lists or workflow progress with collapsible details, status indicators, and progress tracking. It consists of a main Task container with TaskTrigger for the clickable header and TaskContent for the collapsible content area.
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build a mock async programming agent using experimental_useObject.
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/chat/+server.ts
Features
- Visual icons for pending, in-progress, completed, and error states
- Expandable content for task descriptions and additional information
- Built-in progress counter showing completed vs total tasks
- Optional progressive reveal of tasks with customizable timing
- Support for custom content within task items
- Full type safety with proper TypeScript definitions
- Keyboard navigation and screen reader support
Props
Task
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | true | Controls whether the task is expanded or collapsed (bindable) |
class | string | - | Additional CSS classes to apply to the task container |
children | Snippet | - | Child components (typically TaskTrigger and TaskContent) |
...restProps | CollapsibleProps | - | All other Collapsible component props are supported |
TaskTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | The title text to display in the trigger |
class | string | - | Additional CSS classes to apply to the trigger |
children | Snippet | - | Custom content to render instead of the default trigger layout |
...restProps | CollapsibleTriggerProps | - | All other CollapsibleTrigger component props are supported |
TaskContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the content container |
children | Snippet | - | Task items to display when expanded |
...restProps | CollapsibleContentProps | - | All other CollapsibleContent component props are supported |
TaskItem
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the task item |
children | Snippet | - | Content of the task item |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
TaskItemFile
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the file badge |
children | Snippet | - | File name or content to display |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |