--- category: features --- # To-do lists The {@link module:list/todolist~TodoList to-do list} feature lets you create a list of interactive checkboxes with labels. It supports all features of regular lists so you can nest a to-do list together with {@link features/lists bulleted and numbered lists} in any combination. ## Demo {@snippet features/todo-list} ## Keyboard support You can check and uncheck a list item by using the Ctrl + Space shortcut when the selection is in that item. ## Installation To add this feature to your editor, install the [`@ckeditor/ckeditor5-list`](https://www.npmjs.com/package/@ckeditor/ckeditor5-list) package: ```bash npm install --save @ckeditor/ckeditor5-list ``` Then add the `TodoList` plugin to your plugin list and the toolbar configuration: ```js import TodoList from '@ckeditor/ckeditor5-list/src/todolist'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ TodoList, ... ], toolbar: [ 'todoList', ... ], } ) .then( ... ) .catch( ... ); ``` Read more about {@link builds/guides/integration/installing-plugins installing plugins}. ## HTML structure When you call {@link module:core/editor/utils/dataapimixin~DataApi#function-getData `editor.getData()`}, a to-do list will be represented as the following HTML: ```html ``` For nested lists: ```html ``` ### Model representation From the technical point of view, to-do lists are built on top of the {@link module:list/list~List list feature}. In the CKEditor 5 data model they are represented as a special `listType`, with an optional `todoListChecked` attribute: ```html Foo ``` ```html Bar ``` ## Ordered and unordered lists You can read more about these features in the {@link features/lists Lists} feature guide. ## Contribute The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list.