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 */ />