AccordionList

API reference and demos for AccordionList.

Source

Import

import { AccordionList } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

With Actions · Open in Storybook

Reorder Only · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
addDescription	string	—	Add-row copy; grows into the empty state at zero items.
addLabel	string	Add item	Add-row text. Defaults to "Add item".
allowDrag	boolean	false	Offer a grab handle at the head of every row, and drag-to-reorder across the list. Arrow keys on a focused handle move the row too, so the gesture is not mouse-only.
allowDuplicate	boolean	false	Offer the duplicate button.
allowRemove	boolean	false	Offer the remove button.
allowReorder	boolean	false	Offer the up/down reorder buttons.
bodyClassName	string	—	—
canDrag	(…) => boolean	—	Whether a row takes part in dragging — as a source and as a destination. Defaults to every row. A list holding rows that have no position of their own (a filtered-out item, a soft-deleted one) says so here.
className	string	—	—
cloneItem	(…) => T	—	Copy override for duplicate. Defaults to a one-level clone.
defaultExpanded	number | null	null	Initially open row for uncontrolled usage. Defaults to none.
expanded	number | null	—	Controlled open row — an index, or null for none.
focusSelector	string	[data-autofocus], input, select, textarea	Selector focused inside a freshly added row's panel.
idPrefix	string	accordion	Stem for the generated header/panel ids.
itemId	(…) => string	—	Overrides the per-row id stem (e.g. with a JSON-Pointer instance path).
itemLabel	(…) => string	—	Names an item in its actions' accessible labels. Defaults to `Item <n>`.
items*	T[]	—	—
listClassName	string	—	—
onChange	(…) => void	—	Receives the whole next list for every add, remove, duplicate, move or item edit.
onCreate	(…) => T	—	Seeds a new item. Supplying it is what adds the trailing add row.
onExpandedChange	(…) => void	—	—
onReorder	(…) => void	—	Commits a completed drag or handle keypress. Defaults to the same move the reorder buttons perform; a list whose order lives outside `items` (a filtered view of a longer list) reorders the source through this instead.
readOnly	boolean	false	Hides the add row and every per-row action. Rows still open.
renderActions	(…) => ReactNode	—	Extra per-row actions, rendered before the built-in ones.
renderBody*	(…) => ReactNode	—	Panel content. Rendered only while the row is open — never hidden with CSS.
renderHeader*	(…) => ReactNode	—	Row content, rendered inside the disclosure button after the chevron.
renderMeta	(…) => ReactNode	—	Persistent row metadata rendered between the disclosure and actions.
revealActions	boolean	true	Reveal the per-row actions on hover/focus (the default). Pass false where an action carries state the row has to show at rest — a visibility toggle whose glyph says whether the item is hidden answers a question, not just offers a click.
rowClassName	string	—	—
size	enum	md	—
summary	ReactNode	—	Content above the list — typically the item count.
toolbar	ReactNode	—	List-level actions, right-aligned on the summary line (e.g. a view menu).