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

# Accordion

Collapsible content sections organized in a vertical stack

## Example​

    import {
      Accordion,
      AccordionContent,
      AccordionItem,
      AccordionTrigger,
    } from "@databricks/appkit-ui/react"

    export default function AccordionExample() {
      return (
        <Accordion type="single" collapsible className="w-full">
          <AccordionItem value="item-1">
            <AccordionTrigger>Is it accessible?</AccordionTrigger>
            <AccordionContent>
              Yes. It adheres to the WAI-ARIA design pattern.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-2">
            <AccordionTrigger>Is it styled?</AccordionTrigger>
            <AccordionContent>
              Yes. It comes with default styles that matches the other
              components&apos; aesthetic.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-3">
            <AccordionTrigger>Is it animated?</AccordionTrigger>
            <AccordionContent>
              Yes. It&apos;s animated by default, but you can disable it if you
              prefer.
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      )
    }

## Accordion​

Collapsible content sections organized in a vertical stack

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`type` | `enum` | ✓ | - | -
`value` | `string | string[]` |  | - | The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded.
`defaultValue` | `string | string[]` |  | - | The value of the item whose content is expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion.
`onValueChange` | `((value: string) => void) | ((value: string[]) => void)` |  | - | The callback that fires when the state of the accordion changes.
`collapsible` | `boolean` |  | `false` | Whether an accordion item can be collapsed after it has been opened.
`disabled` | `boolean` |  | - | Whether or not an accordion is disabled from user interaction. @defaultValue false
`orientation` | `enum` |  | `vertical` | The layout in which the Accordion operates.
`dir` | `enum` |  | - | The language read direction.
`asChild` | `boolean` |  | - | -

### Usage​

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

    <Accordion /* props */ />

## AccordionContent​

Content area that expands and collapses within an accordion item

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

### Props​

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

### Usage​

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

    <AccordionContent /* props */ />

## AccordionItem​

Individual collapsible section within an accordion

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

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`disabled` | `boolean` |  | - | Whether or not an accordion is disabled from user interaction. @defaultValue false
`value` | `string | string[]` |  | - | The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded.
`asChild` | `boolean` |  | - | -

### Usage​

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

    <AccordionItem /* props */ />

## AccordionTrigger​

Clickable button that triggers accordion content visibility

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

### Props​

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

### Usage​

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

    <AccordionTrigger /* props */ />