Accordion

Accordion groups expandable panels for FAQs, settings sections, or nested detail.

Bind open_items to a RwSignal<HashSet<String>> of open panel ids. Set multiple to allow several panels open at once and collapsible so the last open panel can close. Each AccordionItem needs a distinct value and an AccordionHeader slot. Orbital tracks open state in one parent set — not separate per-panel booleans.

  • Group related content that users expand on demand — policy sections, advanced settings, nested detail
  • Single open panel by default; enable multiple when users compare sections side by side
  • For a single expand/collapse region without a shared header list, compose a one-off panel instead
  • Create open_items as RwSignal::new(HashSet::new()) (or seed with initial ids).
  • Pass the signal to Accordion and give each AccordionItem a matching value.
  • Put the clickable label in AccordionHeader; panel body is the item's remaining children.
  • Optional: multiple=true for several open panels; collapsible=true to close the last panel.
  • Optional: pass motion: MotionSlot on AccordionItem to customize expand/collapse transitions (defaults to theme motion).
Single panel

Parent-owned open_items set with one panel expanded. Bind the signal at your page root so URL or save logic can sync open sections.

Panel content

Multiple open

Accordion that allows several panels to stay expanded with multiple=true. Choose this when users compare content across sections or need several groups visible at once.

Collapsible

Single-section accordion where the open panel can be collapsed entirely via collapsible=true. Use when every section should be closable, including the last remaining panel.

Can close last panel

Keyboard toggle

Accordion headers that respond to keyboard activation (Enter/Space) for expand and collapse. Pair with collapsible=true when focus-driven workflows must toggle panels without a mouse.

Theme tokens

Accordion styled with Orbital theme tokens on headers and panels. Use as a baseline when matching accordion chrome to surrounding surfaces and typography.

Panel body