---
title: "Chain of thought"
description: "A sequence of steps on a connecting line, each folding its details away, for reasoning traces, tool calls and process logs."
url: "https://susonwaiba.github.io/htmx-ui/docs/components/chain-of-thought"
section: "Components"
---
# Chain of thought
A sequence of steps on a connecting line, each folding its details away, for reasoning traces, tool calls and process logs.
```html
Searching for htmx 4 event names
Events are colon-delimited: htmx:after:swap.
htmx:after:process fires on each new element.
htmx.orggithub.com
Reading the migration guide
Three renamed events affect the components.
Writing the answer
```
## Markup
- `.chain-of-thought` stacks the steps. Pure CSS: each step that has details is a ``, so it opens with no JavaScript.
- A step's `.chain-of-thought-step-header` (its ``) holds a `.chain-of-thought-step-icon` and a `.chain-of-thought-step-label`; the chevron is drawn for you. An empty icon is a dot.
- `.chain-of-thought-step-content` holds the details: a `.chain-of-thought-step-items` list of `.chain-of-thought-step-item`s, `.chain-of-thought-results` (a row of [badges](https://susonwaiba.github.io/htmx-ui/docs/components/badge)), a `.chain-of-thought-image`, or any text.
- A step without details is a plain `
` with a `
`: a row that doesn't open.
- A line runs from each step's icon, past its details, to the next step.
## Steps and status
`data-status` on a step: `complete` (or none) is muted, `active` is in the text colour with a pulsing dot (or put a [spinner](https://susonwaiba.github.io/htmx-ui/docs/components/spinner) in its icon), `pending` is faded and `error` is in the danger colour. Mark the active step `aria-current="step"`. To update a running chain, swap the steps from the server with htmx as they change.
```html
Fetched the invoices
Couldn't reach the payments API
Retrying with the backup endpoint
Reconcile the totals
```
## Without the line
`.chain-of-thought-plain` on the chain leaves out the line between the steps.
```html
Parsed the request
Looked up the account
Drafted the reply
```
## Collapsible chain
The whole chain can fold away under one line: make it a `` with a ``, and put the steps in a `.chain-of-thought-content`.
```html
Worked for 12 seconds
Searched 4 sources
Ran the test suite
All 212 tests pass
```
## With tool calls and search results
A step's details can hold anything: the sources a search found, a tool's input and output, or an image it looked at.
```html
```
## In a message
Above an assistant's reply in a `.message-plain` body, folded away once the work is done.
```html
Why did last night's deploy fail?
3 steps
Read the deploy log
Found "DATABASE_URL is not set"
Checked the environment config
The deploy failed because DATABASE_URL isn't set in production. Add it to the environment and redeploy.
```
## Macro
`chain_of_thought()` writes the chain (a `` when it has a label) and `chain_of_thought_step()` a step: a `` when it has a call body, else a plain row. Without an `icon`, a step's status picks one: a check (complete), a spinner (active), a cross (error), else a dot; `icon=false` always gives the dot.
```jinja
{% from "components/chain-of-thought/chain-of-thought.html" import chain_of_thought, chain_of_thought_step %}
{% call chain_of_thought() %}
{% call chain_of_thought_step("Searching the docs", status="complete", icon="search", open=true) %}
Found 3 pages
{% endcall %}
{{ chain_of_thought_step("Writing the answer", status="active") }}
{% endcall %}
{% call chain_of_thought("Worked for 12 seconds", open=false, plain=true) %}…{% endcall %}
```
| Macro | Description |
| --- | --- |
| `chain_of_thought(label=none, open=true, icon=none, plain=false, attrs=none, class="")` | label folds the chain under a summary; plain drops the line. |
| `chain_of_thought_step(label, status=none, icon=none, open=false, attrs=none, class="")` | status: complete \| active \| pending \| error; open only with a call body. |
## Reference
| Class | Description |
| --- | --- |
| `.chain-of-thought` | The steps, stacked. A
, or a to fold them away. |
| `.chain-of-thought-header / -content` | A folding chain's , and the steps under it. |
| `.chain-of-thought-plain` | On the chain: no line between the steps. |
| `.chain-of-thought-step` | One step: a with details, else a
. |
| `[data-status]` | On a step: complete \| active \| pending \| error. |
| `.chain-of-thought-step-header` | The step's (or
): icon, label, chevron. |
| `.chain-of-thought-step-icon` | An icon, a spinner, or empty for a dot. |
| `.chain-of-thought-step-label` | The step's text. |
| `.chain-of-thought-step-content` | The step's details, indented under its label. |
| `.chain-of-thought-step-items / -item` | A list of findings. |
| `.chain-of-thought-results` | A wrapping row of badges, e.g. search results. |
| `.chain-of-thought-image` | An image in a step. |