LibraryActive

Headless UI Disclosure

Unstyled, accessible React component for building show/hide UI like accordion panels.

Field note

What it does

Disclosure, DisclosureButton, and DisclosurePanel provide an accessible foundation for togglable content with aria attributes.

Capabilities

Available capabilities

CSS Transitions Accessible UI Data Attribute Styling Headless styling Accessibility support Disclosure/Accordion Framer Motion Integration Render Props API

Adding a description

Adding a label

Basic example

Combobox

Components

Data attributes

Exposes data-* attributes like data-open for state-based styling.

Disabling a combobox

Disabling a combobox option

DisclosureButton

Button that automatically opens/closes the panel when clicked.

DisclosurePanel

Panel component that shows or hides content.

Examples

Forms

Render props

Exposes open state via render props for conditional rendering.

Styling

Transitions

Add the transition prop to animate panel opening and closing.