# Accordion

Collapsible content sections organized in a vertical stack

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

<!-- -->

```tsx
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[​](#accordion-1 "Direct link to Accordion")

Collapsible content sections organized in a vertical stack

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

### Props[​](#props "Direct link to 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[​](#usage "Direct link to Usage")

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

<Accordion /* props */ />

```

## AccordionContent[​](#accordioncontent "Direct link to AccordionContent")

Content area that expands and collapses within an accordion item

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

### Props[​](#props-1 "Direct link to 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[​](#usage-1 "Direct link to Usage")

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

<AccordionContent /* props */ />

```

## AccordionItem[​](#accordionitem "Direct link to AccordionItem")

Individual collapsible section within an accordion

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

### Props[​](#props-2 "Direct link to 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[​](#usage-2 "Direct link to Usage")

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

<AccordionItem /* props */ />

```

## AccordionTrigger[​](#accordiontrigger "Direct link to AccordionTrigger")

Clickable button that triggers accordion content visibility

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

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

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

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

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

<AccordionTrigger /* props */ />

```