> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Task List Widget Example

> Build an interactive task list with checkboxes

# Task List Widget

A complete example of building an interactive task list widget with checkboxes and dynamic data.

## Template

```jsx theme={null}
<Card padding="lg" radius="lg" shadow="md">
  <Title level={2} value="My Tasks" />
  <Divider spacing="md" />
  
  {tasks.map((task) => (
    <Row key={task.id} gap="md" align="center" padding="sm">
      <Checkbox checked={task.completed} />
      <Text 
        value={task.title} 
        flex={1}
        color={task.completed ? "alpha-50" : "default"}
      />
      <Badge 
        value={task.priority} 
        color={task.priority === "high" ? "red" : "blue"}
      />
    </Row>
  ))}
  
  <Divider spacing="md" />
  
  <Row justify="between" align="center">
    <Text 
      value={`${tasks.filter(t => t.completed).length} of ${tasks.length} completed`}
      size="sm"
      color="alpha-70"
    />
    <Button label="Add Task" variant="primary" size="sm" />
  </Row>
</Card>
```

## Data Schema

```json theme={null}
{
  "tasks": [
    {
      "id": "1",
      "title": "Complete project documentation",
      "completed": true,
      "priority": "high"
    },
    {
      "id": "2",
      "title": "Review pull requests",
      "completed": false,
      "priority": "medium"
    },
    {
      "id": "3",
      "title": "Deploy to production",
      "completed": false,
      "priority": "high"
    }
  ]
}
```

## Features

* ✅ Dynamic task list from data
* ✅ Checkbox for completion status
* ✅ Priority badges with conditional colors
* ✅ Completed task count
* ✅ Visual feedback for completed tasks (faded text)
* ✅ Add task button

## Customization Ideas

### Add Due Dates

```jsx theme={null}
<Row key={task.id} gap="md" align="center">
  <Checkbox checked={task.completed} />
  <Col flex={1}>
    <Text value={task.title} />
    <Text value={task.dueDate} size="sm" color="alpha-60" />
  </Col>
</Row>
```

### Filter by Status

```jsx theme={null}
{tasks.filter(t => !t.completed).map((task) => (
  // Only show incomplete tasks
))}
```

### Group by Priority

```jsx theme={null}
{["high", "medium", "low"].map(priority => (
  <Box key={priority}>
    <Title level={3} value={priority.toUpperCase()} />
    {tasks.filter(t => t.priority === priority).map(task => (
      // Render task
    ))}
  </Box>
))}
```