Component reference

Disclosure

A section the reader can expand and collapse.

Preview

Preserving reading context

Expands only the supplementary information you need. Native keyboard operation, initial expansion, and nested regions do not interfere with each other.

packages/meowtail/stories/disclosure.stories.tsxline 16tsx

render: () => (
  <div className="workshop-composition" data-disclosure-example>
    <header className="workshop-composition-header">
      <h2>Component review record</h2>
      <p>Main conclusions stay visible; execution details expand when needed.</p>
    </header>
    <div className="workshop-section">
      <Disclosure
        summary="View execution details"
        data-disclosure="execution"
        onToggle={(event) => {
          const details = event.currentTarget as HTMLDetailsElement;
          const status = details
            .closest("[data-disclosure-example]")
            ?.querySelector("[data-disclosure-status]");
          if (status)
            status.textContent = details.open
              ? "Execution details expanded"
              : "Execution details collapsed";
        }}
      >
        <div className="workshop-disclosure-detail">
          <p>Checked messages, attachments, and tool results. Review file:</p>
          <code className="workshop-disclosure-path">
            packages/meowtail/stories/review-of-component-typography-and-interaction-states.tsx
          </code>
          <Disclosure summary="View review scope" data-disclosure="nested">
            <p>
              Covers text hierarchy, keyboard focus, and content wrapping on desktop and narrow
              screens.
            </p>
          </Disclosure>
        </div>
      </Disclosure>
      <Disclosure
        summary="Limitations to confirm"
        open
        data-disclosure="open"
        className="review-note"
        summaryClassName="review-note-heading"
        contentClassName="review-note-body"
      >
        <p>
          Component verification does not mean a real service is connected. Integration acceptance
          needs a separate check of data sources and failure recovery.
        </p>
      </Disclosure>
    </div>
    <Note data-disclosure-status role="status">
      Execution details collapsed
    </Note>
  </div>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Disclosure } from "meowtail";

<Disclosure summary="View review scope">
  <p>
    Covers text hierarchy, keyboard focus, and content wrapping on desktop and narrow
    screens.
  </p>
</Disclosure>

API reference

Native details owns expansion and keyboard behavior, independently of the theme.

Props

Prop	Type	Default
`summary`Required	`Child`	–
`open`	`MaybeSignal<boolean>`	–
`onToggle`	`(event: Event) => void`	–
`summaryClassName`	`string`	–
`contentClassName`	`string`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rootsummaryiconcontent

Registry

The component is registered as disclosure in the meowtail component registry.