Disclosure

Usage

import { Disclosure } from '@heroui/react';

<ComponentPreview name="disclosure-basic" minHeight="440px" />

Anatomy

import { Disclosure } from '@heroui/react';

export default () => (
  <Disclosure>
    <Disclosure.Heading>
      <Disclosure.Trigger>
        <Disclosure.Indicator />
      </Disclosure.Trigger>
    </Disclosure.Heading>
    <Disclosure.Content/>
  </Disclosure>
)

Examples

Render Function

<ComponentPreview name="disclosure-render-function" />

Customization

Tailwind CSS

Global CSS

To customize the Disclosure component classes, you can use the @layer components directive. Learn more.

@layer components {
  .disclosure {
    @apply relative;
  }

  .disclosure__trigger {
    @apply cursor-pointer;
  }

  .disclosure__indicator {
    @apply transition-transform duration-300;
  }

  .disclosure__content {
    @apply overflow-hidden transition-all;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Disclosure component uses these CSS classes (View source styles):

Base Classes [!toc]

• .disclosure - Base container styles
• .disclosure__heading - Heading wrapper
• .disclosure__trigger - Trigger button styles
• .disclosure__indicator - Chevron indicator styles
• .disclosure__content - Content container with animations

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Expanded: [data-expanded="true"] on indicator for rotation
• Focus: :focus-visible or [data-focus-visible="true"] on trigger
• Disabled: :disabled or [aria-disabled="true"] on trigger
• Hidden: [aria-hidden="false"] on content for visibility

API Reference

Disclosure

DisclosureTrigger

DisclosureContent

Render Props

When using the render prop pattern, these values are provided:

Related Showcases

Related Components