# DisclosureGroup **Category**: react **URL**: https://www.heroui.com/docs/react/components/disclosure-group **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(navigation)/disclosure-group.mdx > Container that manages multiple Disclosure items with coordinated expanded states *** ## Import ```tsx import { DisclosureGroup } from '@heroui/react'; ``` ### Usage ```tsx "use client"; import {QrCode} from "@gravity-ui/icons"; import {Button, Disclosure, DisclosureGroup, Separator} from "@heroui/react"; import {Icon} from "@iconify/react"; import React from "react"; import {cn} from "tailwind-variants"; export function Basic() { const [expandedKeys, setExpandedKeys] = React.useState(new Set(["preview"])); return (

Scan this QR code with your camera app to preview the HeroUI native components.

Expo Go QR Code

Expo must be installed on your device.

Download the HeroUI native app to explore our mobile components directly on your device.

App Store QR Code

Available on iOS and Android devices.
); } ``` ### Anatomy Import all parts and piece them together. ```tsx import {DisclosureGroup, Disclosure} from '@heroui/react'; export default () => ( ) ``` ### Controlled You can control which disclosures are expanded with external navigation controls using the `expandedKeys` and `onExpandedChange` props. ```tsx "use client"; import {ChevronDown, ChevronUp, QrCode} from "@gravity-ui/icons"; import { Button, Disclosure, DisclosureGroup, Separator, useDisclosureGroupNavigation, } from "@heroui/react"; import {Icon} from "@iconify/react"; import React from "react"; import {cn} from "tailwind-variants"; export function Controlled() { const [expandedKeys, setExpandedKeys] = React.useState(new Set(["preview"])); const itemIds = ["preview", "download"]; // Track our disclosure items const {isNextDisabled, isPrevDisabled, onNext, onPrevious} = useDisclosureGroupNavigation({ expandedKeys, itemIds, onExpandedChange: setExpandedKeys, }); return (

HeroUI Native

Scan this QR code with your camera app to preview the HeroUI native components.

Expo Go QR Code

Expo must be installed on your device.

Scan this QR code with your camera app to preview the HeroUI native components.

Expo Go QR Code

Expo must be installed on your device.
); } ``` ## Related Components - **Accordion**: Collapsible content sections - **Disclosure**: Single collapsible content section - **Button**: Allows a user to perform an action ## Styling ### Passing Tailwind CSS classes ```tsx import { DisclosureGroup, Disclosure, DisclosureTrigger, DisclosurePanel } from '@heroui/react'; function CustomDisclosureGroup() { return ( Item 1 Content 1 Item 2 Content 2 ); } ``` ### Customizing the component classes To customize the DisclosureGroup component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes). ```css @layer components { .disclosure-group { @apply w-full; /* Performance optimization */ contain: layout style; } } ``` HeroUI follows the [BEM](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/disclosure-group.css)): #### 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 | Prop | Type | Default | Description | |------|------|---------|-------------| | `expandedKeys` | `Set` | - | The currently expanded items (controlled) | | `defaultExpandedKeys` | `Iterable` | - | The initially expanded items (uncontrolled) | | `onExpandedChange` | `(keys: Set) => void` | - | Handler called when expanded items change | | `allowsMultipleExpanded` | `boolean` | `false` | Whether multiple items can be expanded simultaneously | | `isDisabled` | `boolean` | `false` | Whether all disclosures in the group are disabled | | `children` | `ReactNode \| RenderFunction` | - | Disclosure items to render | | `className` | `string` | - | Additional CSS classes | ### RenderProps When using the render prop pattern, these values are provided: | Prop | Type | Description | |------|------|-------------| | `expandedKeys` | `Set` | Currently expanded item keys | | `isDisabled` | `boolean` | Whether the group is disabled |