# DisclosureGroup **Category**: react **URL**: https://ui.darkcode.dev/en/docs/react/components/disclosure-group **Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(navigation)/disclosure-group.mdx > Container that manages multiple Disclosure items with coordinated expanded states *** ## Import ```tsx import { DisclosureGroup } from '@darkcode-ui/react'; ``` ### Usage ```tsx "use client"; import {Button, Disclosure, DisclosureGroup, Separator} from "@darkcode-ui/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(["shipping"])); return (

Orders ship within 2-3 business days. Express delivery is available at checkout.

Unused items can be returned within 30 days. We cover return shipping costs.

); } ``` ### Anatomy Import all parts and piece them together. ```tsx import {DisclosureGroup, Disclosure} from '@darkcode-ui/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 { Button, Disclosure, DisclosureGroup, Separator, useDisclosureGroupNavigation, } from "@darkcode-ui/react"; import {ChevronDown, ChevronUp} from "@gravity-ui/icons"; import {Icon} from "@iconify/react"; import React from "react"; import {cn} from "tailwind-variants"; export function Controlled() { const [expandedKeys, setExpandedKeys] = React.useState(new Set(["shipping"])); const itemIds = ["shipping", "returns"]; const {isNextDisabled, isPrevDisabled, onNext, onPrevious} = useDisclosureGroupNavigation({ expandedKeys, itemIds, onExpandedChange: setExpandedKeys, }); return (

Order details

Orders ship within 2-3 business days. Express delivery is available at checkout.

Unused items can be returned within 30 days. We cover return shipping costs.

); } ``` ## 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 '@darkcode-ui/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; } } ``` DarkCode UI 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/DarkCode-Developers/darkcode-ui/blob/main/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 |