---
title: Reasoning Disclosure
description: A collapsible region for a model's reasoning trace.
category: AiReasoning
status: beta
since: 0.3.9
tags: [ai, reasoning, disclosure]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
The duration shows only when `streaming` is false and `durationMs` is set.
::::TuffDemoWrapper{demo="ReasoningDisclosureReasoningDisclosureDemo" code-lang="vue"}
---
code: |
  <template>
    <TxReasoningDisclosure streaming text="Breaking the problem down…" />

    <TxReasoningDisclosure
      :duration-ms="4200"
      default-open
      text="Confirm the input bounds first, then pick the algorithm."
    />
  </template>
---
::::

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