Skip to content
flood.md
v0.2.10

Accordion

Related disclosure sections with optional single or multiple expansion.

Preview

Use Accordion

Accordion is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood
Example import style
accordion.tsxTSX
"use client";

import { FloodRoot, Accordion } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Accordion label="Questions" items={[{value:"install",title:"How do I install Flood?",content:"Install the packages and import the stylesheet."}]} />
    </FloodRoot>
  );
}

Design notes

  • Headings contain native disclosure buttons. Set headingLevel for the surrounding document.
  • Enter/Space toggle. Tab visits available triggers and open panel contents. ArrowUp/Down and Home/End move among enabled top-level triggers without opening panels.

API reference

PropValuesDefault
labelstringRequired
itemsreadonly AccordionItem[]Required
expansionMode"single" | "multiple""single"
valuereadonly string[]—
defaultValuereadonly string[][]
onValueChange(value: string[]) => void—
disabledbooleanfalse
controlSize"sm" | "md" | "lg" | "xl""md"
headingLevel2 | 3 | 4 | 5 | 63
Native HTML propsOmit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "defaultValue" | "onChange">Forwarded
View TypeScript source
Page MarkdownAgent skill