# Disclosure
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/disclosure
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/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 '@darkcode-ui/react';
```
### Usage
```tsx
"use client";
import {Button, Disclosure} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";
export function Basic() {
const [isExpanded, setIsExpanded] = React.useState(true);
return (
Orders ship within 2-3 business days. Express delivery is available at checkout.
);
}
```
### Anatomy
Import the Disclosure component and access all parts using dot notation.
```tsx
import { Disclosure } from '@darkcode-ui/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 {Button, Disclosure} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";
export function CustomRenderFunction() {
const [isExpanded, setIsExpanded] = React.useState(true);
return (
}
onExpandedChange={setIsExpanded}
>
}>
Orders ship within 2-3 business days. Express delivery is available at checkout.
);
}
```
## Styling
### Passing Tailwind CSS classes
```tsx
import { Disclosure } from '@darkcode-ui/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;
}
}
```
DarkCode UI 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/DarkCode-Developers/darkcode-ui/blob/main/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 |