Disclosure

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, with no enhancer needed for a lone disclosure. Use the disclosure enhancer on a wrapper only when you want a group of disclosures to be mutually exclusive.

Disclosure

Live

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, { allowMultiple });
// 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).

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.

Accessibility

• The native <details> summary is a real button with built-in keyboard support.
• No ARIA is needed for a single disclosure; the element is self-describing.

Related

AccordionCollapsible sections built on native <details>.TabsA tabbed interface with full ARIA roles and keyboard support.