Display

Todo Item

Server Component

Interactive todo row with priority, due date, labels, and subtasks.

Import

tsx

import { TodoItem } from "@cronus-ui/ui";

bash

npx cronus-ui add todo-item

Examples

Interactive

Checkbox, priority, due date, project, labels, and a subtask count. Toggle completion from the checkbox.

Complete project documentation

Write comprehensive docs for the new API

this minuteCronus UIDocumentationAPIhigh1/2 subtasks

tsx

<TodoItem
  id="1"
  title="Complete project documentation"
  description="Write comprehensive docs for the new API"
  completed={false}
  priority="high"
  dueDate={new Date()}
  project={{ id: "cronus", name: "Cronus UI" }}
  labels={[{ id: "docs", name: "Documentation" }]}
  subtasks={[
    { id: "s1", title: "Outline", completed: true },
    { id: "s2", title: "Draft", completed: false },
  ]}
  onToggleComplete={(id, completed) => console.log(id, completed)}
/>

Priority levels

High, medium, and low use error, warning, and info tokens. `none` hides the chip.

Fix critical bug in production

high

Update documentation

medium

Refactor legacy code

low

Review team submissions

tsx

<div className="flex w-full max-w-lg flex-col gap-3">
  <TodoItem id="h" title="Fix critical bug in production" completed={false} priority="high" />
  <TodoItem id="m" title="Update documentation" completed={false} priority="medium" />
  <TodoItem id="l" title="Refactor legacy code" completed={false} priority="low" />
  <TodoItem id="n" title="Review team submissions" completed={false} priority="none" />
</div>

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

TodoItemLabels

Prop	Type	Default	Description
`complete`*	`string`	—	—
`subtasks`*	`string`	—	—

TodoItemProps

Extends Omit<HTMLAttributes<HTMLElement>, "title" | "onClick" | "id">, VariantProps<typeof todoItemVariants>

Prop	Type	Default	Description
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the underlying DOM node.
`id`*	`string`	—	—
`title`*	`string`	—	—
`description`	`string`	—	—
`completed`*	`boolean`	—	—
`priority`	`TodoPriority`	`"none"`	—
`dueDate`	`string \| Date`	—	—
`labels`	`TodoLabel[]`	—	Override default English strings.
`subtasks`	`TodoSubtask[]`	—	—
`project`	`TodoProject`	—	—
`onToggleComplete`	`(id: string, completed: boolean) => void`	—	—
`onClick`	`(id: string) => void`	—	—
`isSelected`	`boolean`	`false`	—
`locale`	`string`	`"en-US"`	—
`now`	`Date`	—	—
`copy`	`Partial<TodoItemLabels>`	—	—
`selected`	`"true" \| "false"`	`false`	One of "true" \| "false".
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.