tiptap/docs/api/nodes/task-item.md

description	icon
The actually task, without it the task list would be nothing.	task-line

TaskItem

This extension renders a task item list element, which is a <li> tag with a data-type attribute set to taskItem. It also renders a checkbox inside the list element, which updates a checked attribute.

This extension doesn’t require any JavaScript framework, it’s based on Vanilla JavaScript.

Installation

npm install @tiptap/extension-task-list @tiptap/extension-task-item

This extension requires the TaskList node.

Settings

HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

TaskItem.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})

nested

Whether the task items are allowed to be nested within each other.

TaskItem.configure({
  nested: true,
})

onReadOnlyChecked

A handler for when the task item is checked or unchecked while the editor is set to readOnly. If this is not supplied, the task items are immutable while the editor is readOnly. If this function returns false, the check state will be preserved (readOnly).

TaskItem.configure({
  onReadOnlyChecked: (node, checked) => {
    // do something
  },
})

Keyboard shortcuts

Command	Windows/Linux	macOS
splitListItem()	Enter	Enter
sinkListItem()	Tab	Tab
liftListItem()	Shift Tab	Shift Tab

Source code

packages/extension-task-item/

Usage

https://embed.tiptap.dev/preview/Nodes/TaskItem