HomeGetting StartedColor SystemTypographySpacingIconographyLayoutInstallationUsageAngularBlazorReactSvelteVueThemingTypographyCustomizationCSS-Only ComponentsFormsIconsIllustrationsAccessibilityGlobal ConfigurationTailwind CSSSass LibraryForge MCP ServerDropdown OptionsFocus Indicator ClippingAll componentsButtonButton AreaChipFloating Action ButtonIcon ButtonSplit ButtonAutocompleteButton ToggleCalendarCheckboxChip FieldColor PickerDate PickerDate Range PickerFile PickerLabelRadioSelectSliderSwitchText FieldTime PickerApp BarApp LauncherDrawerMenuPaginatorSkip LinkStepperTabsView SwitcherAccordionApp LayoutCardDividerExpansion PanelScaffoldSplit ViewStackStructured CardToolbarBadgeBannerBusy IndicatorCircular ProgressDialogInline MessageLinear ProgressPage StateSkeletonToastTooltipAvatarIconKeyLabel ValueListMeterSecretTableTimelineTimestampTreeKeyboard ShortcutPopoverIntroductionColorTypographySpacingShapeBorderElevationLayeringAnimationUsageIcon LibraryBlocksRoadmapChangelogBlog

Accordion

Wraps a set of expansion panels so that opening one automatically closes any other open panel.

Account

Manage your profile and sign-in details.

Notifications

Choose how you want to be notified.

Privacy

Control who can see your activity.

Overview

Accordions are vertically grouped sections with headers and associated expandable content areas that manage the display of multiple related content sections. The accordion ensures that only one section can be expanded at any given time, automatically collapsing other open panels when a new one is expanded. This creates a focused user experience where attention is directed to a single content area.

Usage

forge-accordion wraps a set of expansion panel children and closes any other open panel whenever one of them opens, through its panelSelector property for scoping to panels that aren’t direct children. It adds no visual styling of its own; pair it with a divider between panels for visual separation. If a design calls for more than one panel open at a time, skip the accordion wrapper entirely and use expansion panels on their own.

Rules

Do
Use clear, descriptive headers that indicate what content will be revealed.Consider default expanded state for the most important or commonly accessed section.Reserve an accordion for panels that represent mutually exclusive views of related information.Pair panels in an accordion with a divider between them, since the component adds no visual separation of its own.Set panelSelector when the panels it manages aren't its direct children.
Don't
Don't wrap panels in an accordion if a design calls for more than one open at a time — use plain expansion panels instead.Don't nest an accordion group inside another accordion group's panel.Don't rely on the accordion for visual styling — it only manages which panel is open.Don’t use accordions for critical information that users must see immediately.Don’t make headers too long — keep them scannable and concise.Don’t hide essential navigation or primary actions within collapsed panels.

Basic usage

Give each panel a header-slotted button; opening one panel automatically closes any other open panel in the same accordion.

An accordion wrapping three panels, only one open at a time.

Accordions wrap a collection of expansion panels to ensure that only one panel is expanded at a time.

import "@tylertech/forge/accordion";
Properties
PropertyAttributeTypeDefaultDescription
panelSelectorpanel-selectorstring | undefined—Gets/sets the selector to use for finding the child expansion panels. Defaults to searching the direct children for `<forge-expansion-panel>` elements. Use this if you need to scope this accordion to a specific set of expansion panels, or your expansion panels are not direct children of the accordion.
Events
NameTypeDescription
forge-accordion-toggleCustomEvent<IExpansionPanelComponent>Dispatched when a child expansion panel is toggled. Includes the related expansion panel element in the event detail.

Keyboard interaction

  • Every panel in the accordion should be reachable by keyboard navigation, with a visible focus cue.
  • Pressing Space or Enter on a focused panel should toggle it open or closed the same way a click would.

Nested interactive content

If an open panel contains a link, button, or other navigation element, those should be included in the tab order while tabbing through the accordion. If a closed panel contains any of that content, it should be skipped instead.

Loading Forge chat…