Disclosure

A single expandable section via native <details>.

stableNo JS requiredBuilt on <details>hydrateless/disclosure.css

A single expandable section. Purely CSS via the native <details> element; give several disclosures the same name attribute and the browser itself makes them mutually exclusive. The optional enhancer only adds observable state: an open/setOpen API, an onOpenChange callback, and a bubbling hl:open-change event.

Disclosure

Show more details

This content is revealed when you expand the disclosure. The native details element handles all of the toggling, no JavaScript required.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceDisclosure } from '@hydrateless/enhancers/disclosure';

const handle = enhanceDisclosure(container, { defaultOpen, onOpenChange });
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
`summary`	`string`	—	The visible toggle label (or use the `summary` slot).
`open`	`boolean`	—	Controlled open state; pair with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`name`	`string`	—	Shared group name; the browser closes the other disclosures in the group.

Events and callbacks

Event / Callback	Payload	Description
`hl:open-change`	`{ open: boolean }`	Fires after the disclosure opens or closes (also the `onOpenChange` callback).

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
`--hl-border`	Panel border.
`--hl-radius-md`	Corner radius.

JavaScript

Props

Events and callbacks

CSS variables

Accessibility

Related