Ariakit
/
/
This site is under construction Subscribe to updates

Disclosure

Click on a button to show (expand, open) or hide (collapse, close) a content element in React. This component is based on the WAI-ARIA Disclosure Pattern.

Installation

npm install ariakit

Learn more in Getting started.

API

useDisclosureState()

<Disclosure />
<DisclosureContent />

Styling

Styling the expanded state

You can use the aria-expanded attribute to style the expanded state:

.disclosure[aria-expanded="true"] {
  color: red;
}

Learn more in Styling.