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

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

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

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

# Or: With Yarn
yarn add @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',
  },
})

Keyboard shortcuts

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

Source code

packages/extension-task-item/

Usage