nabs-ui-accordion

Reusable React accordion control for the Nabs UI library.

Usage

import { Accordion } from "@net-advantage/nabs-ui-accordion";

const items = [
  {
    id: "summary",
    header: "Summary",
    content: "Overview content.",
  },
  {
    id: "details",
    header: "Details",
    content: "Detailed content.",
  },
  {
    id: "history",
    header: "History",
    content: "History content.",
  },
];

export function Example() {
  return (
    <Accordion
      mode="multiple"
      items={items}
      defaultExpandedItemIds={["summary"]}
      onExpandedItemIdsChange={(nextIds) => console.log(nextIds)}
    />
  );
}

Props

• mode supports single and multiple panel expansion behavior.
• items defines the list of accordion items to render.
• expandedItemIds controls expanded items.
• defaultExpandedItemIds sets initial expanded items for uncontrolled usage.
• onExpandedItemIdsChange fires whenever expansion state changes.