Widgets
Accordion
Displays stacked sections that can be expanded or collapsed.
Displays stacked sections that can be expanded or collapsed.
Usage
ui.accordion({
id: "faq",
items: [
{ key: "install", title: "How do I install?", content: ui.text("Use npm or bun") },
{ key: "mouse", title: "Mouse support?", content: ui.text("Yes") },
],
expanded: state.expanded,
onChange: (expanded) => app.update({ expanded }),
allowMultiple: false,
})Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | required | Stable accordion widget id |
items | Array<{ key: string; title: string; content: VNode }> | required | Accordion sections |
expanded | string[] | required | Expanded section keys |
onChange | (expanded: readonly string[]) => void | required | Called when expansion changes |
allowMultiple | boolean | false | Allows multiple expanded sections |
key | string | - | Reconciliation key |
Keyboard Behavior
Up/Down: moves focus between section headers.Enter/Space: toggles the focused section.Tab/Shift+Tab: enters/leaves accordion header focus.