---
title: "List Block — Ordered, Unordered, Checklist"
description: "Nested ordered, unordered, and checklist items, with Tab and Shift-Tab indentation and lossless list paste."
source: https://blokeditor.com/docs/list/
lastmod: 2026-09-07
---

Framework JavaScript

Block Tools List

# List block: ordered, unordered, and checklists

Bulleted, numbered, and to-do (checklist) lists with unlimited nesting. Each list item is a separate block. The toolbox shows three entries by default — one for each style — and items can be converted between styles via the block settings menu.

### Import

TypeScript

```
import { List } from '@bloklabs/core/tools';
```

### Configuration

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultStyle` | `"unordered" | "ordered" | "checklist"` | `"unordered"` | The list style used when inserting a new list block. |
| `styles` | `ListStyle[]` | `["unordered","ordered","checklist"]` | Restrict which styles are available in the block settings conversion menu. |
| `toolboxStyles` | `ListStyle[]` | `all styles` | Restrict which list styles appear as separate toolbox entries. |
| `itemColor` | `string` | `undefined` | Custom CSS color for list item text (e.g. "#3b82f6"). |
| `itemSize` | `string` | `undefined` | Custom CSS font-size for list items (e.g. "18px", "1.25rem"). |

### Save Data

TypeScript

```
interface ListData {
  text: string;                                    // Item HTML content
  style: 'unordered' | 'ordered' | 'checklist'; // List type
  checked?: boolean;  // Checklist check state
  start?: number;     // First number for ordered lists (root items only); omitted when 1
  depth?: number;     // Nesting depth; omitted for root items (depth 0)
}
```

JSON

```
{
  "id": "ghi789",
  "type": "list",
  "data": {
    "text": "First item",
    "style": "unordered"
  }
}
```

### Usage Example

TypeScript

```
import { Blok } from '@bloklabs/core';
import { List } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    list: {
      class: List,
      defaultStyle: 'unordered',
    },
  },
});
```