Lists

Lists are paragraph styles, just like headings and blockquotes - toggling one affects the whole paragraph the cursor sits in, or every paragraph the selection touches. The editor supports three kinds:

• Unordered list - toggleUnorderedList()
• Ordered list - toggleOrderedList()
• Checkbox list - toggleCheckboxList(checked: boolean)

Because they're paragraph styles, only one can be active in a paragraph at a time exactly as described in Basic styles.

note

As for now the library does not support nested lists. You can only create a single-level list. If you try to insert a nested list in any way, e.g. by calling setValue on the editor's ref, the list will get flattened by the normalizer.

Bulleted and numbered lists

These two take no arguments - each call converts the affected paragraphs into a list, and calling it again turns them back into plain paragraphs:

ref.current?.toggleUnorderedList();
ref.current?.toggleOrderedList();

Checkbox lists

This list's items need a starting state. toggleCheckboxList takes a checked boolean that decides whether newly created boxes begin checked or unchecked:

// New items start unchecked.
ref.current?.toggleCheckboxList(false);

Once the list exists, the user can tick individual items by tapping their checkbox - you don't need to wire anything up for that.

note

You can also create ordered and unordered lists by typing respectively '1. ' and '- '. That behavior is present by default and can be customized with Text shortcuts.

Try it out

Type a few lines, place the cursor on one (or select several), and toggle each list type. Notice how switching from Bulleted to Numbered swaps the style instead of stacking. Inserting a new line preserves the list format by creating another item, and tapping a checkbox toggles just that item.

Loading…

info

This page covers creating lists. To change how they look - bullet color and size, marker weight, checkbox size, indentation - see Styling the input.