Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

#Installation

npx @dinachi/cli@latest add accordion

tsx

import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@/components/ui/accordion'

value and defaultValue always use arrays, even when multiple is false.
Use AccordionItem.disabled to disable only one section instead of the entire accordion.
Use AccordionPanel.keepMounted when a closed panel should preserve uncontrolled field state.
Use hiddenUntilFound when browser find-in-page should reveal matching content inside a closed panel.
Dinachi's bundled styles are designed for vertical accordions. Base UI also supports orientation="horizontal" for state and keyboard behavior, but horizontal layouts need custom styling.

Prop	Type	Default	Description
multiple	boolean	false	Whether multiple items can be open at the same time
defaultValue	(any \| null)[]	—	The value of the item(s) to expand by default (array)
value	(any \| null)[]	—	The controlled value of the item(s) to expand (array)
onValueChange	(value: (any \| null)[], eventDetails) => void	—	Callback fired when the expanded state changes
disabled	boolean	false	When true, prevents the user from interacting with the accordion
loopFocus	boolean	true	Loops focus from the last trigger back to the first when using arrow key navigation
keepMounted	boolean	false	Keeps closed panels mounted in the DOM. Can also be set on AccordionPanel for per-panel control
hiddenUntilFound	boolean	false	Allows browser find-in-page to reveal matching closed panel content using hidden='until-found'
orientation	'vertical' \| 'horizontal'	'vertical'	Sets the keyboard navigation axis. Dinachi's bundled styles are optimized for vertical accordions

Prop	Type	Default	Description
value	any	—	Unique value for the item. If omitted, Base UI generates one automatically
disabled	boolean	false	Disables a single item while leaving the rest of the accordion interactive
onOpenChange	(open: boolean, eventDetails) => void	—	Fires when the individual item's panel opens or closes

Prop	Type	Default	Description
keepMounted	boolean	false	Keeps this specific panel mounted when closed so uncontrolled field state is preserved
hiddenUntilFound	boolean	false	Lets browser find-in-page reveal this panel even while it is visually hidden