Disclosure

1. Live Preview

vanilla live preview activates on the client; source HTML keeps a readable preview island and primitive contract.

2. Installation

Install adapter-specific dependencies first, then complete setup via the installation guide. installation docs

pnpm add @nake-ui/primitives @nake-ui/adapter-vanilla @nake-ui/theme-vanilla

3. Usage

Minimal runnable usage for the current adapter.

import "@nake-ui/theme-vanilla/styles.css";
import { bindDisclosure } from "@nake-ui/adapter-vanilla";

const binding = bindDisclosure(nodes, items, options);
binding.destroy();

4. Examples

Default Open

Use defaultOpen to show important context on first render while keeping it collapsible.

import "@nake-ui/theme-vanilla/styles.css";
import { bindDisclosure } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDisclosure(
    { root, trigger, content },
    { defaultOpen: true }
  );

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Shipping information";

Controlled

Synchronize disclosure open state with an external button and status text.

import "@nake-ui/theme-vanilla/styles.css";
import { bindDisclosure } from "@nake-ui/adapter-vanilla";

let open = true;

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDisclosure(
    { root, trigger, content },
    {
      defaultOpen: open,
      onOpenChange(nextOpen) {
        open = nextOpen;
        state.textContent = open ? "Open" : "Closed";
      }
    }
  );

  externalToggle.addEventListener("click", () => {
    open = !open;
    binding.controller.setOpen(open);
    binding.sync();
  });

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Advanced filters";

Disabled

Demonstrate trigger/content behavior when disclosure is disabled.

import "@nake-ui/theme-vanilla/styles.css";
import { bindDisclosure } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDisclosure(
    { root, trigger, content },
    { defaultOpen: true, disabled: true }
  );

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Enterprise settings";

With Heading

Wrap trigger with a heading element to keep explicit document structure semantics.

import "@nake-ui/theme-vanilla/styles.css";
import { bindDisclosure } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDisclosure({ root, trigger, content });

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Account security";

FAQ Group

Compose multiple disclosure items to build FAQ-style collapsible groups.

import "@nake-ui/theme-vanilla/styles.css";
import { bindDisclosure } from "@nake-ui/adapter-vanilla";

const bindings = faqRoots.map((faqRoot) =>
  bindDisclosure({
    root: faqRoot,
    trigger: faqRoot.querySelector("[data-demo-slot=faq-item-trigger]")!,
    content: faqRoot.querySelector("[data-demo-slot=faq-item-content]")!
  })
);

// cleanup on unmount
for (const binding of bindings) {
  binding.destroy();
}

// q-1: Is disclosure styled by default? -> No, disclosure is headless and only provides behavior and semantics.
// q-2: Can disclosure be controlled? -> Yes, sync open state with external events and call controller.setOpen().

Rich Content

Render rich panel content such as definition lists without changing disclosure semantics.

import "@nake-ui/theme-vanilla/styles.css";
import { bindDisclosure } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDisclosure({ root, trigger, content });

  // panel can contain rich semantic nodes
  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Product details";

Read-only

readOnly shows current state while preventing user toggling, useful for audit/preview views.

import "@nake-ui/theme-vanilla/styles.css";
import { bindDisclosure } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindDisclosure(
    { root, trigger, content },
    { defaultOpen: true }
  );

  // read-only gate: keep visible state but block user toggling
  trigger.setAttribute("aria-disabled", "true");
  trigger.addEventListener("click", preventToggle, true);
  trigger.addEventListener("keydown", preventToggle, true);

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Deployment summary";

5. RTL

The same structure running inside a `dir="rtl"` container.