Accordion

Collapsible content sections organized in a vertical stack

Example

accordion

Loading preview…

Collapsible content sections organized in a vertical stack

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

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`		-	-

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

<Accordion /* props */ />

Content area that expands and collapses within an accordion item

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

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.

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

<AccordionContent /* props */ />

Individual collapsible section within an accordion

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

Prop	Type	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`	-	-

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

<AccordionItem /* props */ />

Clickable button that triggers accordion content visibility

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

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

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

<AccordionTrigger /* props */ />