Accordion
Progressively discloses related sections with single or multiple expansion modes and a complete keyboard pattern.
Default
A single-disclosure accordion. Opening an item closes the previously open item.
Manage organization details used across records.
tsx
<Accordion items={items} defaultExpanded={["profile"]} />Installation
tsx
import { Accordion } from "madagent";Multiple
Multiple mode allows any number of sections to remain open.
Manage organization details used across records.
Choose invoice delivery and default payment terms.
tsx
<Accordion type="multiple" items={items} defaultExpanded={["profile", "billing"]} />Controlled
Use expanded and onExpandedChange when the application owns disclosure state.
Expanded: billing
Choose invoice delivery and default payment terms.
tsx
const [expanded, setExpanded] = useState<string[]>(["billing"]);
<Accordion items={items} expanded={expanded} onExpandedChange={setExpanded} />Chevron Position
Chevron placement is logical, so start and end adapt automatically in RTL.
tsx
<Accordion items={items} chevronPosition="start" />Disabled Item
tsx
<Accordion items={[...items, { id: "locked", title: "Locked", content: "...", disabled: true }]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionItemDef[] | - | Disclosure definitions with id, title, content, and optional disabled state |
type | "single""multiple" | "single" | Whether one or many items may be expanded |
expanded | string[] | - | Controlled expanded item ids |
defaultExpanded | string[] | [] | Initial expanded ids in uncontrolled mode |
onExpandedChange | (ids: string[]) => void | - | Called whenever expansion changes |
chevronPosition | "start""end" | "end" | Logical chevron placement |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
إدارة معلومات المؤسسة الأساسية.
Usage
tsx
<Accordion items={arabicItems} defaultExpanded={["account"]} />