Disclosure

A headless, accessible disclosure (collapsible) primitive for toggling content visibility.

Features

Toggle visibility
Controlled or uncontrolled open state
Semantic trigger button
ARIA-expanded and ARIA-controls wiring
Unmounts when closed
Headless styling

Installation

npm install @ariaui/disclosure

Examples

Two layouts from the legacy doc: a narrow collapsible list (Heroicons trigger) and a wider playground row (Lucide chevrons). Both use the same Root / Trigger / Content model; style open and closed states with data-[state=open]: utilities.

Collapsible

A compact disclosure: trigger beside a title, with stacked rows inside the panel.

Preview

No preview output yet.

live.tsxReady

Framer Motion

The compact collapsible disclosure animated with Framer Motion through Content asChild composition.

Preview

No preview output yet.

live.tsxReady

Anatomy

tsx

import * as Disclosure from "@ariaui/disclosure";

export default function Example() {
  return (
    <Disclosure.Root>
      <Disclosure.Trigger />
      <Disclosure.Content />
    </Disclosure.Root>
  );
}

API Reference

Root

State container. Owns the open/closed state and provides context to Trigger and Content.

Prop	Type	Default
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—

Trigger

Button that toggles the disclosure open/closed. Renders as a native button element.

Attribute	Values
aria-expanded	"true" when open, "false" when closed
aria-controls	ID of the Content element
type	button

Content

Container for the collapsible content. Only rendered in the DOM when the disclosure is open.

Prop	Type	Default
asChild	boolean	false

Keyboard

Shortcut	Action
`Enter`	Toggle the disclosure open/closed when the trigger is focused.
`Space`	Toggle the disclosure open/closed when the trigger is focused.
`Tab`	Move focus to the next focusable element.
`Shift`+`Tab`	Move focus to the previous focusable element.

Accessibility

The Disclosure component implements the WAI-ARIA Disclosure pattern:

Trigger renders as a native <button> element with type="button".
Trigger carries aria-expanded reflecting the current open/closed state.
Trigger carries aria-controls pointing to the Content element's ID.
Content is removed from the DOM when closed, making it inaccessible to assistive technologies.
Click, Enter, and Space on the trigger all toggle the disclosure state.