HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
AccordionView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorGroups collapsible sections, one open at a time by default.ExperimentalSince 0.1.0LayoutUsageimport'@fusion.dev/helix/accordion'import'@fusion.dev/helix-headless/accordion'Preview
API ReferenceRoothelix-accordionGroups collapsible sections, one open at a time by default.
PropTypeDefaultDescriptionmode"single"|"single-collapsible"How many sections may be open at once.separation"outlined"|"plain"How the stack separates itself from the page.
ReadTypeDescriptionitemsHelixHeadlessAccordionItem[]Direct items, in light-DOM order. Client only: the server has no tree.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The accordion's items.
CSS PropertyDescription--accordion-border-colorColor of the seams, and of the frame when outlined.--accordion-radiusCorner radius of the stack, when outlined.
Itemhelix-accordion-itemOne collapsible section of an accordion.
PropTypeDefaultDescriptionchevronPlacement"auto"|"start"|"end"|"none"Where the open indicator sits, or whether there is one.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.namestringA group name, which is how `<details>` says a set is exclusive.openbooleanWhether the element is open.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The content revealed when open.summaryThe always-visible trigger content.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before the section closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionfocusTrigger() => voidMoves focus to this item's trigger.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionchevronThe open and close indicator.containerThe outer wrapper.contentThe revealed region.content-innerPadding wrapper inside the animated region.triggerThe clickable summary row.
CSS PropertyDescription--accordion-item-paddingInset of the trigger and content.
Roothelix-headless-accordionGroups collapsible sections, one open at a time by default.
PropTypeDefaultDescriptionmode"single"|"single-collapsible"How many sections may be open at once.
ReadTypeDescriptionitemsHelixHeadlessAccordionItem[]Direct items, in light-DOM order. Client only: the server has no tree.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The accordion's items.
Itemhelix-headless-accordion-itemOne collapsible section of an accordion.
PropTypeDefaultDescriptionchevronPlacement"auto"|"start"|"end"|"none"Where the open indicator sits, or whether there is one.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.namestringA group name, which is how `<details>` says a set is exclusive.openbooleanWhether the element is open.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The content revealed when open.summaryThe always-visible trigger content.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before the section closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before the section opens. Cancelable: refusing it takes the decision and nothing moves.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionfocusTrigger() => voidMoves focus to this item's trigger.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionchevronThe open and close indicator.containerThe outer wrapper.contentThe revealed region.content-innerThe clipping box inside the animated region.triggerThe clickable summary row.
ExamplesNameDescriptionChevron At The EndThe mark at the end of the row, for a list read as a table of contents.EventsEach section announces for itself, and a listener on the set hears nothing.OutlinedA hairline around the set, for a panel that needs an edge against the page.PlainNo border and no fill, for sections inside something that already has both.PreviewSections that open one at a time or together, with the first already open.PreviewSections that open one at a time or together, with the first already open.SingleOne section open at a time, so opening the next closes the last.