DisclosureGroup

Import

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

Usage

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

Anatomy

Import all parts and piece them together.

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

export default () => (
  <DisclosureGroup>
    <Disclosure id="item1">
      <Disclosure.Heading>
        <Disclosure.Trigger>
          <Disclosure.Indicator />
        </Disclosure.Trigger>
      </Disclosure.Heading>
      <Disclosure.Content />
    </Disclosure>
  </DisclosureGroup>
)

Controlled

You can control which disclosures are expanded with external navigation controls using the expandedKeys and onExpandedChange props.

<ComponentPreview name="disclosure-group-controlled" minHeight="580px" />

Styling

Passing Tailwind CSS classes

import {
  DisclosureGroup,
  Disclosure,
  DisclosureTrigger,
  DisclosurePanel
} from '@heroui/react';

function CustomDisclosureGroup() {
  return (
    <DisclosureGroup className="border rounded-lg p-4 space-y-2">
      <Disclosure id="first" className="border-b pb-2">
        <DisclosureTrigger>Item 1</DisclosureTrigger>
        <DisclosurePanel>Content 1</DisclosurePanel>
      </Disclosure>
      <Disclosure id="second">
        <DisclosureTrigger>Item 2</DisclosureTrigger>
        <DisclosurePanel>Content 2</DisclosurePanel>
      </Disclosure>
    </DisclosureGroup>
  );
}

Customizing the component classes

To customize the DisclosureGroup component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .disclosure-group {
    @apply w-full;

    /* Performance optimization */
    contain: layout style;
  }
}

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

CSS Classes

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

Base Classes

• .disclosure-group - Base container styles with layout containment

Interactive States

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

• Disabled: :disabled or [aria-disabled="true"] on entire group
• Expanded Management: Automatically manages [data-expanded] states on child Disclosure items

API Reference

DisclosureGroup Props

RenderProps

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