Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Collapsible

Interactive component that expands and collapses content

## Example​

    "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​

Interactive component that expands and collapses content

Source: `packages/appkit-ui/src/react/ui/collapsible.tsx`

### Props​

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

### Usage​

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

    <Collapsible /* props */ />

## CollapsibleContent​

Content area that can be expanded or collapsed

Source: `packages/appkit-ui/src/react/ui/collapsible.tsx`

### 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​

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

    <CollapsibleContent /* props */ />

## CollapsibleTrigger​

Button that toggles the collapsible content visibility

Source: `packages/appkit-ui/src/react/ui/collapsible.tsx`

### Props​

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

### Usage​

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

    <CollapsibleTrigger /* props */ />