# Disclosure **Category**: react **URL**: https://www.heroui.com/docs/react/components/disclosure **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(navigation)/disclosure.mdx > A disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps the content. *** ## Import ```tsx import { Disclosure } from '@heroui/react'; ``` ### Usage ```tsx "use client"; import {QrCode} from "@gravity-ui/icons"; import {Button, Disclosure} from "@heroui/react"; import {Icon} from "@iconify/react"; import React from "react"; export function Basic() { const [isExpanded, setIsExpanded] = React.useState(true); 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.
); } ``` ### Anatomy Import the Disclosure component and access all parts using dot notation. ```tsx import { Disclosure } from '@heroui/react'; export default () => ( ) ``` ## Related Components - **Accordion**: Collapsible content sections - **DisclosureGroup**: Group of collapsible panels - **Button**: Allows a user to perform an action ### Custom Render Function ```tsx "use client"; import {QrCode} from "@gravity-ui/icons"; import {Button, Disclosure} from "@heroui/react"; import {Icon} from "@iconify/react"; import React from "react"; export function CustomRenderFunction() { const [isExpanded, setIsExpanded] = React.useState(true); return (
} onExpandedChange={setIsExpanded} >
}>

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.
); } ``` ## Styling ### Passing Tailwind CSS classes ```tsx import { Disclosure } from '@heroui/react'; function CustomDisclosure() { return ( Click to expand Hidden content ); } ``` ### Customizing the component classes To customize the Disclosure 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 { @apply relative; } .disclosure__trigger { @apply cursor-pointer; } .disclosure__indicator { @apply transition-transform duration-300; } .disclosure__content { @apply overflow-hidden transition-all; } } ``` HeroUI follows the [BEM](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/disclosure.css)): #### Base Classes - `.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 Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `isExpanded` | `boolean` | `false` | Controls the expanded state | | `onExpandedChange` | `(isExpanded: boolean) => void` | - | Callback when expanded state changes | | `isDisabled` | `boolean` | `false` | Whether the disclosure is disabled | | `children` | `ReactNode \| RenderFunction` | - | Content to render | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### DisclosureTrigger Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `ReactNode \| RenderFunction` | - | Trigger content | | `className` | `string` | - | Additional CSS classes | ### DisclosureContent Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `children` | `ReactNode` | - | Content to show/hide | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### RenderProps When using the render prop pattern, these values are provided: | Prop | Type | Description | |------|------|-------------| | `isExpanded` | `boolean` | Current expanded state | | `isDisabled` | `boolean` | Whether disclosure is disabled |