Disclosure

Disclosure displays hidden content that can be revealed or concealed.

Installation

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

Import

Usage

With Subtitle

Compact

If you set isCompact to true, the Disclosure will be displayed in a compact style.

Default expanded

If you want to expand the disclosure by default, you can set the defaultExpanded to true.

Disabled

If you want to disable the disclosure, you can set the isDisabled property to true.

Start content

If you want to display some content before the Disclosure, you can set the startContent property.

Custom Indicator

Disclosure has a property called indicator. You can use it to customize the open/close indicator.

The indicator can be also a function, which receives the isExpanded, isDisabled and the default indicator as parameters.

Custom Motion

Disclosure's animation can be changed by upadting the content style.

Controlled

Disclosure is a controlled component, which means you need to control the isExpanded property by yourself.

Custom Styles

Disclosure Slots

• base: The disclosure wrapper.
• heading: The dsiclosure heading. It contains the indicator and the title.
• trigger: The button that open/close the disclosure.
• titleWrapper: The wrapper of the title and subtitle.
• title: The disclosure item title.
• subtitle: The disclosure item subtitle.
• startContent: The content before the disclosure.
• indicator: The element that indicates the open/close state of the dsiclosure.
• content: Disclosure content.

Data Attributes

Disclosure has the following attributes on the base element:

• data-expanded: Whether the disclosure item is expanded.
• data-hover: When the disclosure item is being hovered. Based on useHover.
• data-focus: When the disclosure item is being focused. Based on useFocusRing.
• data-focus-visible: When the disclosure item is being focused with the keyboard. Based on useFocusRing.
• data-disabled: When the disclosure item is disabled. Based on isDisabled prop.
• data-pressed: When the disclosure item is pressed. Based on usePress.

Accessibility

• Keyboard event support for Space, Enter, Tab and Shift + Tab keys.
• Keyboard focus management and cross browser normalization.
• aria-expanded attribute.
• aria-disabled attribute.

API

Disclosure Props

Disclosure Events

Types

Disclosure Indicator Props