# Collapsible

Interactive component that expands and collapses content

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
"use client"

import * as React from "react"
import { ChevronsUpDown } from "lucide-react"

import {
  Button,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@databricks/appkit-ui/react"

export default function CollapsibleExample() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="w-[350px] space-y-2"
    >
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">
          Example Collapsible
        </h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm" className="w-9 p-0">
            <ChevronsUpDown className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-3 font-mono text-sm">
        First item
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          Second item
        </div>
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          Third item
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

```

## Collapsible[​](#collapsible-1 "Direct link to Collapsible")

Interactive component that expands and collapses content

**Source:** [`packages/appkit-ui/src/react/ui/collapsible.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/collapsible.tsx)

### Props[​](#props "Direct link to Props")

| Prop           | Type                        | Required | Default | Description |
| -------------- | --------------------------- | -------- | ------- | ----------- |
| `defaultOpen`  | `boolean`                   |          | -       | -           |
| `open`         | `boolean`                   |          | -       | -           |
| `disabled`     | `boolean`                   |          | -       | -           |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
| `asChild`      | `boolean`                   |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Collapsible } from '@databricks/appkit-ui';

<Collapsible /* props */ />

```

## CollapsibleContent[​](#collapsiblecontent "Direct link to CollapsibleContent")

Content area that can be expanded or collapsed

**Source:** [`packages/appkit-ui/src/react/ui/collapsible.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/collapsible.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop         | Type      | Required | Default | Description                                                                                                           |
| ------------ | --------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| `forceMount` | `true`    |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| `asChild`    | `boolean` |          | -       | -                                                                                                                     |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { CollapsibleContent } from '@databricks/appkit-ui';

<CollapsibleContent /* props */ />

```

## CollapsibleTrigger[​](#collapsibletrigger "Direct link to CollapsibleTrigger")

Button that toggles the collapsible content visibility

**Source:** [`packages/appkit-ui/src/react/ui/collapsible.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/collapsible.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { CollapsibleTrigger } from '@databricks/appkit-ui';

<CollapsibleTrigger /* props */ />

```