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.

# 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:

• Start a line with * or - followed by a space for a bulleted list.
• Start a line with 1. or 1) followed by a space for a numbered list.

# List properties

Besides the basic functionality of creating ordered and unordered lists, CKEditor 5 offers formatting tools that let you control the lists. You can enable features such as more styles for list markers, setting the start index, or reversing the list order separately or all at once. Check out the individual demos below or see all list properties working together in the full-featured editor example.

# List styles

The list style feature introduces some more styles for the list item markers. When enabled, it adds 3 styles for unordered lists and 6 styles for ordered lists to choose from. The user will be able to set or change the list style via the dropdown. It opens when you click the arrow next to the appropriate list button in the toolbar.

# Demo

In the editor below, use the ordered or unordered list dropdown to choose the desired marker type for each list.

# List start index

The list start index feature allows the user to choose the starting point of an ordered list. By default, this would be 1 (or A, or I – see the list styles section). Sometimes you may want to start a list with some other digit or letter, though.

When this feature is enabled, an extra dropdown option is available in the ordered list toolbar button. Thanks to it, the user may set or change the starting marker.

# Demo

In the editor below, notice how the ordering continues in the second list. To achieve continuous numbering of all spaceships from the example, go to the first item of the last list. Then use the ordered list dropdown input field to set the start index.

# Reversed list

The reversed list feature lets the user reverse the numbering order of a list, changing it from ascending to descending. This is useful in countdowns and things-to-do lists that need to reproduce steps in a reversed order (for example, in disassembly instructions).

When this feature is enabled, an extra dropdown switch is available in the ordered list toolbar button. Thanks to it, the user may reverse the order of a list with a single click.

# Demo

Click the second list and use the ordered list dropdown switch to choose whether to reverse the numbering order.

# Installation

The List plugin provides the ordered (numbered) and unordered (bulleted) features for CKEditor 5. Additional list properties, such as list marker styles, start index, or reversed list order, are provided by the ListProperties plugin.

# List feature

To add this feature to your editor, install the @ckeditor/ckeditor5-list package:

npm install --save @ckeditor/ckeditor5-list

Then add the List plugin to your plugin list and the toolbar configuration:

import { List } from '@ckeditor/ckeditor5-list';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ List, /* ... */ ],
        toolbar: [ 'bulletedList', 'numberedList', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# List properties

To enable the list properties feature for ordered and unordered lists, install the @ckeditor/ckeditor5-list package:

npm install --save @ckeditor/ckeditor5-list

Then add the ListProperties plugin to your plugin list and configure the toolbar.

To enable selected sub-features of the list properties, add their configuration to your editor. Set true for each feature you want to enable:

import { ListProperties } from '@ckeditor/ckeditor5-list';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ListProperties, /* ... */ ],
        toolbar: [ 'bulletedList', 'numberedList', /* ... */ ],
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Related features

These CKEditor 5 features provide similar functionality:

• To-do lists – Create a list of interactive checkboxes with labels.
• Multi-level lists – Multi-level lists allow the user to set different markers (symbols, text or numbers) to display at each level of the list.
• Block indentation – Set indentation for text blocks such as paragraphs or headings and lists.
• Autoformatting – Format the text on the go with Markdown code.

# Common API

The List plugin registers:

• The 'numberedList' command.
• The 'bulletedList' command.
• The 'indentList' command.
• The 'outdentList' command.
• The 'numberedList' UI button.
• The 'bulletedList' UI button.

The ListProperties plugin registers:

• The listStyle command. It accepts the type of the list style to set. If not set, it uses the default marker (usually decimal).

  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 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.

  editor.execute( 'listStart', { startIndex: 3 } );
  

• The listReversed command. It is a Boolean and defaults to false (meaning the list order is ascending).

  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 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-list.