---
title: Disclosure
description: Expandable sections with a button and an animated content panel.
---

Use disclosures when content should stay collapsed until the user asks to reveal more.

<UiDemo id="disclosure" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/Disclosure.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### With an indicator

<UiDemo id="disclosure-indicator" />

### Disabled

<UiDemo id="disclosure-disabled" />

## API Reference

### Disclosure

A container that coordinates disclosure state and content.

```kotlin
@Composable
fun Disclosure(
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `expanded` | `Boolean` | Whether the disclosure content is expanded. |
| `onExpandedChange` | `(Boolean) -> Unit` | Called when the disclosure expanded state changes. |
| `modifier` | `Modifier` | Modifier applied to the component. |
| `content` | `@Composable () -> Unit` | Composable content displayed by the component. |

### DisclosureButton

A button that toggles the disclosure between expanded and collapsed.

```kotlin
@Composable
fun DisclosureButton(
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    contentPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 8.dp),
    indicator: (@Composable (expanded: Boolean) -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the component. |
| `enabled` | `Boolean` | Whether the disclosure button can be interacted with. |
| `contentPadding` | `PaddingValues` | Padding applied inside the component content. |
| `indicator` | `(@Composable (expanded: Boolean) -> Unit)?` | Optional trailing indicator that receives the expanded state. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for focus and press state. |
| `content` | `@Composable RowScope.() -> Unit` | Composable content displayed by the component. |

### DisclosurePanel

The expandable content region of a disclosure.

```kotlin
@Composable
fun DisclosurePanel(
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(12.dp),
    enter: EnterTransition = expandVertically(animationSpec = spring()) + fadeIn(),
    exit: ExitTransition = shrinkVertically(animationSpec = spring()) + fadeOut(),
    content: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the component. |
| `contentPadding` | `PaddingValues` | Padding applied inside the component content. |
| `enter` | `EnterTransition` | Transition used when the disclosure panel expands. |
| `exit` | `ExitTransition` | Transition used when the disclosure panel collapses. |
| `content` | `@Composable () -> Unit` | Composable content displayed by the component. |