Reasoning Disclosure

A collapsible region for a model's reasoning trace.

VerifiedSince 0.3.9

Usage

Basic

The duration shows only when streaming is false and durationMs is set.

Loading demo...

Best Practices

Leave it collapsed by default; an open trace pushes the answer below the fold.
When streaming ends, set durationMs together with streaming: false.
To remember the open state across sessions, hold it yourself and re-key the component.
When localizing, override label, thinkingLabel, and durationFormatter together.
The body is plain text only; compose with TxStreamMarkdown for Markdown.

API Reference

Props

Name	Type	Default	Description
`text`	`string`	`''`	The reasoning body, rendered as plain text with line breaks kept.
`streaming`	`boolean`	`false`	Output is still arriving; switches the header label and icon, and the body follows its tail.
`durationMs`	`number`	—	Thinking time in milliseconds.
`defaultOpen`	`boolean`	`false`	Initial open state, read once on mount.
`label`	`string`	`'Reasoning'`	Header label once settled.
`thinkingLabel`	`string`	`'Thinking…'`	Header label while streaming.
`durationFormatter`	`(ms: number) => string`	—	Formats the duration; defaults to `Thought for X.Xs`.

Events

Name	Payload	Description
`toggle`	`(open: boolean)`	Fires on a header click with the resulting open state.

Overview

While streaming, each change to text scrolls the body to the bottom; otherwise the scroll position is left alone.
The header is a native <button> with aria-expanded and an aria-controls pointing at the body; the icons are aria-hidden.
Collapsing hides the body but keeps it mounted.