# Ordered and unordered lists
The list feature lets you create ordered (numbered) and unordered (bulleted) lists. The unique thing about them is that you can put any content inside each list item (including block elements like paragraphs and tables), retaining the continuity of numbering and indentation.
> **Warning**
>
> Since version 41.0.0, the list support plugin has changed for CKEditor 5. You can read more about this change in the `#breaking-changes-to-the-list-plugin` section of `Update to 41.x` in [updating from older versions](../../updating/guides/updating-from-older-versions.md) guide.
## Demo
Use the editor below to see the list feature in action. You can use toolbar buttons to insert both ordered and unordered lists .
You can also use Markdown code recognized by the [autoformatting feature](../autoformat.md):
* Start a line with `*` or `-` followed by a space for a bulleted list.
* Start a line with any number followed by `.` or `)` and a space for a numbered list.
This demo presents a limited set of features. Visit the [feature-rich editor example](../../examples/builds-custom/full-featured-editor.md) to see more in action.
## Installation
The `List` plugin provides the [ordered (numbered) and unordered (bulleted) features](lists.md) for CKEditor 5. [Additional list properties](lists-properties.md), such as list marker styles, start index, or reversed list order, are provided by the `ListProperties` plugin.
### List feature
After [installing the editor](../../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:
**NPM**
```js
import { ClassicEditor, List } from 'ckeditor5';
ClassicEditor
.create( {
licenseKey: '', // Or 'GPL'.
plugins: [ List, /* ... */ ],
toolbar: [ 'bulletedList', 'numberedList', /* ... */ ],
list: {
// Configuration.
}
} )
.then( /* ... */ )
.catch( /* ... */ );
```
**CDN**
```js
const { ClassicEditor, List } = CKEDITOR;
ClassicEditor
.create( {
licenseKey: '',
plugins: [ List, /* ... */ ],
toolbar: [ 'bulletedList', 'numberedList', /* ... */ ],
list: {
// Configuration.
}
} )
.then( /* ... */ )
.catch( /* ... */ );
```
### List properties
After [installing the editor](../../getting-started/installation/cloud/quick-start.md), add `ListProperties` to your plugin list and toolbar configuration:
To enable selected sub-features of the [list properties](lists-properties.md), add their configuration to your editor. Set `true` for each feature you want to enable:
**NPM**
```js
import { ClassicEditor, List, ListProperties } from 'ckeditor5';
ClassicEditor
.create( {
plugins: [ List, ListProperties, /* ... */ ],
toolbar: [ 'bulletedList', 'numberedList', /* ... */ ],
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
}
} )
.then( /* ... */ )
.catch( /* ... */ );
```
**CDN**
```js
const { ClassicEditor, List, ListProperties } = CKEDITOR;
ClassicEditor
.create( {
plugins: [ List, ListProperties, /* ... */ ],
toolbar: [ 'bulletedList', 'numberedList', /* ... */ ],
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
}
} )
.then( /* ... */ )
.catch( /* ... */ );
```
> **Warning**
>
> The [`ListProperties`](../../api/module_list_listproperties-ListProperties.md) feature overrides UI button implementations from the [`ListUI`](../../api/module_list_list_listui-ListUI.md).
#### Enabling specific enumerators
To enable only selected list item enumerators for the ordered list, you need to explicitly list them in the editor configuration. This can also be used to enable additional, `arabic-indic` numeral enumerators. To achieve this, replace the `styles: true` configuration option with a `styles { }` listing, for example:
```js
list: {
properties: {
styles: {
listStyleTypes: {
numbered: [
'decimal',
'decimal-leading-zero',
'arabic-indic'
],
bulleted: [
'disc',
'circle',
'square'
]
}
}
}
}
```
### Editor output configuration
Starting with version 45.1.1, list items (`` elements) in the editor data output contain an additional attribute `data-list-item-id`. The attribute is necessary to ensure that the lists feature work correctly with other editor features and mechanisms.
```html
```
If data loaded in the editor does not contain the `data-list-item-id` attributes on list items, they will be automatically added when data is saved.
If you wish to save the editor contents without this attribute, you can set the `skipListItemIds` flag to `true` when calling `editor.getData()` method. **However, please note, that data without IDs should be used only for presentation purposes (such as displaying the document as HTML), and should not be used to initialize the editor.**
```js
editor.getData( { skipListItemIds: true } );
```
Such output will not contain `data-list-item-id` attribute:
```html
```
## Related features
These CKEditor 5 features provide similar functionality:
* [To-do lists](todo-lists.md) – Create a list of interactive checkboxes with labels.
* [Multi-level lists](multi-level-lists.md) – Multi-level lists allow the user to set different markers (symbols, text or numbers) to display at each level of the list.
* [Block indentation](../indent.md) – Set indentation for text blocks such as paragraphs or headings. Also supports [visual block indentation of lists and list items](../indent.md#indenting-lists).
* [Autoformatting](../autoformat.md) – Format the text on the go with Markdown code.
## Common API
The [`List`](../../api/module_list_list-List.md) plugin registers:
* The [`'numberedList'`](../../api/module_list_list_listcommand-ListCommand.md) command.
* The [`'bulletedList'`](../../api/module_list_list_listcommand-ListCommand.md) command.
* The [`'indentList'`](../../api/module_list_list_listindentcommand-ListIndentCommand.md) command.
* The [`'outdentList'`](../../api/module_list_list_listindentcommand-ListIndentCommand.md) command.
* The `'numberedList'` UI button.
* The `'bulletedList'` UI button.
The [`ListProperties`](../../api/module_list_listproperties-ListProperties.md) plugin registers:
* The [`listStyle`](../../api/module_list_listproperties_liststylecommand-ListStyleCommand.md) command. It accepts the `type` of the list style to set. If not set, it uses the default marker (usually decimal).
```js
editor.execute( 'listStyle', { type: 'lower-roman' } );
```
The available types are:
* For bulleted lists: `'disc'`, `'circle'`, and `'square'`.
* For numbered lists: `'decimal'`, `'decimal-leading-zero'`, `'lower-roman'`, `'upper-roman'`, `'lower-latin'`, and `'upper-latin'`.
* The [`listStart`](../../api/module_list_listproperties_liststartcommand-ListStartCommand.md) command. It is a number and defaults to `1` (meaning a list starts with `1`). If enabled, it accepts a numerical value for the `start` attribute.
```js
editor.execute( 'listStart', { startIndex: 3 } );
```
* The [`listReversed`](../../api/module_list_listproperties_listreversedcommand-ListReversedCommand.md) command. It is a Boolean and defaults to `false` (meaning the list order is ascending).
```js
editor.execute( 'listReversed', { reversed: true } );
```
* The `numberedList` UI split button. It overrides the UI button registered by the `List` plugin.
* The `bulletedList` UI split button. It overrides the UI button registered by the `List` plugin.
## Contribute
The source code of the feature is available on GitHub at .
---
Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)