Skip to main content

​
Task List Widget

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

​
Template

<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

{
  "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

<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

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

​
Group by Priority

{["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>
))}