> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Accordion > Accordions let users show and hide sections of related content on a page. export const CodeLivePreview = ({code, children, height, removePadding = false, mode = 'shadow'}) => { const previewRef = useRef(null); const BEEQ_ESM_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.esm.js'; const BEEQ_CSS_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.css'; const BEEQ_ICONS_URL = 'https://esm.sh/@beeq/core/dist/beeq/svg'; const ensureParentBeeqRuntime = () => { if (document.querySelector('script[data-beeq-parent-runtime]')) return; const script = document.createElement('script'); script.type = 'module'; script.src = BEEQ_ESM_URL; script.dataset.beeqParentRuntime = BEEQ_ICONS_URL; document.head.appendChild(script); }; const executeSnippetScripts = (root, runtimeWindow, previewRootArg, skipAttr) => { root.querySelectorAll('script').forEach(oldScript => { if (skipAttr && oldScript.hasAttribute(skipAttr)) return; if (oldScript.src) { const newScript = runtimeWindow.document.createElement('script'); newScript.src = oldScript.src; oldScript.replaceWith(newScript); return; } runtimeWindow.Function('previewRoot', oldScript.textContent || '')(previewRootArg); oldScript.remove(); }); }; const syncIframeMode = iframeDoc => { const root = document.documentElement; const explicitMode = root.getAttribute('bq-mode'); const isDark = root.classList.contains('dark'); const resolvedMode = explicitMode || (isDark ? 'dark' : 'light'); iframeDoc.documentElement.setAttribute('bq-mode', resolvedMode); iframeDoc.body.setAttribute('bq-mode', resolvedMode); }; useEffect(() => { if (mode === 'shadow') ensureParentBeeqRuntime(); }, [mode]); useEffect(() => { const container = previewRef.current; if (!container) return; if (removePadding) container.style.padding = '0'; container.innerHTML = ''; if (mode === 'iframe') { const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.style.width = '100%'; iframe.style.border = '0'; iframe.style.display = 'block'; iframe.style.minHeight = height ?? '0px'; iframe.setAttribute('title', 'Live code preview'); iframe.setAttribute('loading', 'lazy'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); container.appendChild(iframe); const iframeDoc = iframe.contentDocument; const iframeWin = iframe.contentWindow; if (!iframeDoc || !iframeWin) return; iframeDoc.open(); iframeDoc.write(['', '', '', ' ', ' ', ' ', ` `, ` `, '', '', code, '', ''].join('\n')); iframeDoc.close(); syncIframeMode(iframeDoc); const modeObserver = new MutationObserver(() => syncIframeMode(iframeDoc)); modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'bq-mode'] }); executeSnippetScripts(iframeDoc, iframeWin, iframeDoc, 'data-beeq-iframe-runtime'); return () => modeObserver.disconnect(); } const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: 'open' }); if (!shadowRoot.adoptedStyleSheets.length) { const fixSheet = new CSSStyleSheet(); fixSheet.replaceSync(` bq-dropdown::part(panel), bq-panel::part(panel), bq-select::part(panel), bq-date-picker::part(panel) { z-index: 9999; } bq-tooltip::part(panel) { position: absolute; } `); shadowRoot.adoptedStyleSheets = [fixSheet]; } shadowRoot.innerHTML = [``, code].join(''); executeSnippetScripts(shadowRoot, window, shadowRoot); return undefined; }, [code, mode, height]); return
{}
{} {children &&
{children}
}
; }; BEEQ Accordion component overview BEEQ Accordion component overview Accordions organize related content into collapsible sections. Each section has a header that reveals or hides its panel content, helping people scan headings first and open only the information they need. Use `bq-accordion-group` to wrap multiple `bq-accordion` items when you need to coordinate their behavior — for example, collapsing one when another opens. ## At a glance * **Best for:** FAQs, advanced settings, grouped secondary information, and long pages where not every section needs to stay open. * **Use with care:** If people need to compare sections side by side or keep several sections visible while working, an accordion may add friction. * **Related components:** Use [tabs](/components/tab) when content belongs to a small set of peer views, or a simple show/hide pattern when only one section needs to expand. ## When to use Use accordions when * Related content can be grouped into clearly labeled sections * Page length or visual density needs to be reduced without removing content * People benefit from scanning headings before deciding what to open Do not use accordions when * People need to compare content across sections at the same time * The content is short enough to show fully without harming readability * Most sections are likely to be opened during the same task ## Anatomy Accordion anatomy Accordion anatomy Each accordion item includes a clickable header and a collapsible panel. The header should set clear expectations about what the panel contains. | Part | Element | Description | | ----- | --------------- | -------------------------------------------------------------------------------------------------- | | **1** | Container | The outer wrapper for the entire accordion item | | **2** | Header | The clickable trigger that toggles the panel open/closed | | **3** | Panel | The collapsible area containing the body content | | **4** | Prefix | An optional suffix like an icon or avatar before the header text for additional context | | **5** | Suffix | An optional prefix for additional context after the header text (less common than prefix) | | **6** | Expand/Collapse | Icon indicating the current state of the panel and providing a visual affordance for interactivity | ## Design guidelines Use accordions to reduce page density without hiding content that people need to complete the task. Keep each header specific, keep panel content focused, and use `bq-accordion-group` when several accordion items should behave as one coordinated set. ## Usage The examples below cover the most common ways to use accordions in BEEQ. Start with a single accordion item when sections are independent, and use an accordion group when items should behave as one coordinated set. ### Default (collapsed) Accordion items are collapsed by default. This works best when the heading alone gives enough context for someone to decide whether opening the section is worth it. Accordion title

This is the accordion panel content. It is hidden by default and revealed when the header is clicked.

`} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Accordion title

This is the accordion panel content. It is hidden by default and revealed when the header is clicked.

 ``` ```jsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion } from "@beeq/react"; Accordion title

This is the accordion panel content. It is hidden by default and revealed when the header is clicked.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordion } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordion], template: ` Accordion title

This is the accordion panel content. It is hidden by default and revealed when the header is clicked.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Expanded by default Use the `expanded` attribute when a section should start open — for example when the first item contains the most important information or when one section is expected to be reviewed first. Expanded by default

This panel is visible when the component first renders.

`} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Expanded by default

This panel is visible when the component first renders.

 ``` ```jsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion } from "@beeq/react"; Expanded by default

This panel is visible when the component first renders.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordion } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordion], template: ` Expanded by default

This panel is visible when the component first renders.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Options ### Appearance Two appearance values are available: * **filled**: (default) adds a background color to the header for a contained look * **ghost**: removes the background for a minimal style that blends with surrounding content. Since `filled` is the default, there's no need to explicitly set `appearance="filled"` on the component. Filled (default)

The header has a background color in the filled appearance.

Ghost

The header has no background in the ghost appearance.

 `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Filled (default)

The header has a background color in the filled appearance.

 Ghost

The header has no background in the ghost appearance.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion } from "@beeq/react"; {/* Filled: default */} Filled (default)

The header has a background color in the filled appearance.

 {/* Ghost */} Ghost

The header has no background in the ghost appearance.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordion } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordion], template: ` Filled (default)

The header has a background color in the filled appearance.

 Ghost

The header has no background in the ghost appearance.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Size Accordions support two sizes: `medium` (default) and `small`. The `small` size uses more compact padding and a smaller border radius, giving it a tighter look. Medium accordion (default)

This is the medium size — more padding, suitable for most use cases.

Small accordion

This is the small size — compact padding for dense layouts and using small border radius.

 `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Medium accordion (default)

This is the medium size — more padding, suitable for most use cases.

 Small accordion

This is the small size — compact padding for dense layouts and using small border radius.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion } from "@beeq/react"; Medium accordion (default)

This is the medium size — more padding, suitable for most use cases.

 Small accordion

This is the small size — compact padding for dense layouts and using small border radius.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordion } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordion], template: ` Medium accordion (default)

This is the medium size — more padding, suitable for most use cases.

 Small accordion

This is the small size — compact padding for dense layouts and using small border radius.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` Use the `small` size in dense layouts or sidebars where space is limited. ### Group Wrap related `bq-accordion` items inside `bq-accordion-group` when they should behave as a coordinated set. By default, only one item can stay open at a time. Add the `multiple` attribute when people may need to keep several sections open while reading or working. The group also lets you set `appearance`, `size`, and `no-animation` once and have them cascade to all child accordions. Attributes/Properties set in the group can be overridden by setting them directly on an individual accordion item. ### Single open (default group behavior) Use the default group behavior when the sections are mutually exclusive or when keeping only one panel open helps reduce distraction. Section one

Content for section one.

 Section two

Content for section two.

 Section three

Content for section three.

 `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Section one

Content for section one.

 Section two

Content for section two.

 Section three

Content for section three.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion, BqAccordionGroup } from "@beeq/react"; Section one

Content for section one.

 Section two

Content for section two.

 Section three

Content for section three.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordionGroup, BqAccordion } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordionGroup, BqAccordion], template: ` Section one

Content for section one.

 Section two

Content for section two.

 Section three

Content for section three.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Multiple open Allow multiple sections to stay open when people may need to review, reference, or complete information across several panels at once. Section one

Content for section one.

 Section two

Content for section two.

 Section three

Content for section three.

 `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Section one

Content for section one.

 Section two

Content for section two.

 Section three

Content for section three.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion, BqAccordionGroup } from "@beeq/react"; Section one

Content for section one.

 Section two

Content for section two.

 Section three

Content for section three.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordionGroup, BqAccordion } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordionGroup, BqAccordion], template: ` Section one

Content for section one.

 Section two

Content for section two.

 Section three

Content for section three.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` Use `expand-all` attribute (`expandAll` prop) on the group to open every accordion simultaneously — useful for print views or when people need to scan all content at once. ### Header slots Use the `prefix` slot for adding elements like icons or avatars before the header text, and the `suffix` slot for elements after the text. These provide additional context to help people scan and understand the sections. With prefix icon

The header includes an icon in the prefix slot before the title text.

 With prefix avatar

The prefix slot also accepts an avatar for person-related sections.

 With suffix icon

The header includes an icon in the suffix slot after the title text.

 `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} With prefix icon

The header includes an icon in the prefix slot before the title text.

 With prefix avatar

The prefix slot also accepts an avatar for person-related sections.

 With suffix icon

The header includes an icon in the suffix slot after the title text.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion, BqAvatar, BqIcon } from "@beeq/react"; {/* Prefix icon */} With prefix icon

The header includes an icon in the prefix slot before the title text.

 {/* Prefix avatar */} With prefix avatar

The prefix slot also accepts an avatar for person-related sections.

 {/* Suffix icon */} With suffix icon

The header includes an icon in the suffix slot after the title text.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordion, BqIcon, BqAvatar } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordion, BqIcon, BqAvatar], template: ` With prefix icon

The header includes an icon in the prefix slot before the title text.

 With prefix avatar

The prefix slot also accepts an avatar for person-related sections.

 With suffix icon

The header includes an icon in the suffix slot after the title text.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### States ### Disabled Use `disabled` only when a section is temporarily unavailable. The header will not respond to interaction and the `bqOpen` / `bqClose` events will not fire. Disabled accordion

This content cannot be accessed while the accordion is disabled.

`} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Disabled accordion

This content cannot be accessed while the accordion is disabled.

 ``` ```jsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion } from "@beeq/react"; Disabled accordion

This content cannot be accessed while the accordion is disabled.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordion } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordion], template: ` Disabled accordion

This content cannot be accessed while the accordion is disabled.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Animation By default, accordions animate the panel open and closed with a smooth height transition. Add the `no-animation` attribute to disable this and make the panel appear/disappear instantly. With animation (default)

The panel slides open and closed smoothly.

No animation

The panel appears and disappears instantly.

 `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} With animation (default)

The panel slides open and closed smoothly.

 No animation

The panel appears and disappears instantly.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion } from "@beeq/react"; {/* Default: animated */} With animation (default)

The panel slides open and closed smoothly.

 {/* Instant: no animation */} No animation

The panel appears and disappears instantly.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordion } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordion], template: ` With animation (default)

The panel slides open and closed smoothly.

 No animation

The panel appears and disappears instantly.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` Use `no-animation` when reduced motion is a concern, or as a fallback for users who have `prefers-reduced-motion` set. You can also set `no-animation` on `bq-accordion-group` to disable animation for all child accordions at once. ### Custom expand/collapse icons The accordion provides two separate slots — `expand` and `collapse` — to replace the default plus/minus icons. Use `expand` for the icon shown when the panel is closed and `collapse` for the icon shown when the panel is open. Alternatively, combine a single icon in the `expand` slot with the `rotate` prop, which rotates the icon 180° when the accordion opens. When using a single custom icon with `rotate`, make sure the icon is designed to be recognizable in both orientations (e.g., a caret or arrow) and **it's place in the `expand` slot**, as the rotation is applied to that icon when the accordion is expanded. Custom icons for expand and collapse

This accordion shows an open folder when expanded and a closed folder when collapsed.

 Custom icon with rotation

This accordion uses a single caret icon that rotates 180° when expanded.

 `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Custom icons for expand and collapse

This accordion shows an open folder when expanded and a closed folder when collapsed.

 Custom icon with rotation

This accordion uses a single caret icon that rotates 180° when expanded.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion, BqIcon } from "@beeq/react"; {/* Two separate icons */} Custom icons for expand and collapse

This accordion shows an open folder when expanded and a closed folder when collapsed.

 {/* Single icon + rotate */} Custom icon with rotation

This accordion uses a single caret icon that rotates 180° when expanded.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordion, BqIcon } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordion, BqIcon], template: ` Custom icons for expand and collapse

This accordion shows an open folder when expanded and a closed folder when collapsed.

 Custom icon with rotation

This accordion uses a single caret icon that rotates 180° when expanded.

 `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Custom header layout Sometimes customizations are needed to meet some requirements. For example, having the collapse/expand indicator in front instead of at the end (current position). Developers can [rely on the exposed shadow DOM parts](/guides/styles#component-shadow-dom-parts) of the components to target elements inside it and tweak not only the look & feel but also the layout. In the example below, we **define a custom CSS class** that targets the header part to reverse the order of the header content and the expand icon, and also applies flexbox styles to space out the header content. Then, assuming the custom CSS file is imported in the project, we apply the custom class to the accordion to achieve the desired header layout. .my-accordion { &::part(header) { flex-direction: row-reverse; } div[slot="header"] { display: flex; justify-content: space-between; } }
Order summary $123.99

This is an example of a custom header layout using the header slot and CSS part selectors to move the expand icon to the end and space out the header content.
Order summary $123.99

This is an example of a custom header layout using the header slot and CSS part selectors to move the expand icon to the end and space out the header content.

 `} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .my-accordion { &::part(header) { flex-direction: row-reverse; } div[slot="header"] { display: flex; justify-content: space-between; } } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Order summary $123.99

This is an example of a custom header layout using the header slot and CSS part selectors to move the expand icon to the end and space out the header content.
Order summary $123.99

This is an example of a custom header layout using the header slot and CSS part selectors to move the expand icon to the end and space out the header content.

 ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAccordion, BqAccordionGroup, BqIcon } from "@beeq/react"; import "./styles.css";
Order summary $123.99

This is an example of a custom header layout using the header slot and CSS part selectors to move the expand icon to the end and space out the header content.
Order summary $123.99

This is an example of a custom header layout using the header slot and CSS part selectors to move the expand icon to the end and space out the header content.

 ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAccordionGroup, BqAccordion, BqIcon } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAccordionGroup, BqAccordion, BqIcon], template: `
Order summary $123.99

This is an example of a custom header layout using the header slot and CSS part selectors to move the expand icon to the end and space out the header content.
Order summary $123.99

This is an example of a custom header layout using the header slot and CSS part selectors to move the expand icon to the end and space out the header content.

 `, styles: [` .my-accordion { &::part(header) { flex-direction: row-reverse; } div[slot="header"] { display: flex; justify-content: space-between; } } `], }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Best practices Do Write header labels that clearly describe the content inside. People should be able to predict what they will find before opening the section. Don't Do not nest accordions inside accordion panels. It creates unclear hierarchy and makes interaction patterns harder to follow. Do Use `bq-accordion-group` when items belong together and their open/close behavior should be coordinated. Don't Do not hide critical content inside accordions. If the information is essential to the page, it should usually remain visible. Do Consider `no-animation` or a reduced-motion strategy for workflows where motion may distract or overwhelm. Don't Do not use an accordion when a simpler show/hide pattern or a tab group would communicate the structure more clearly. Do Keep panel content focused on the promise made by the header so people can scan and decide quickly. Don't Do not use vague headers such as "More details" when a specific label would set clearer expectations. ## Accessibility * **Keyboard navigation** — the header is a focusable button and can be activated with Enter or Space. * **Clear headings** — header labels should describe the panel content clearly enough to be understood before expansion. * **ARIA support** — the header exposes `aria-expanded`, and the panel visibility is reflected for assistive technologies. * **Disabled state** — disabled accordions are removed from the tab order, so use this state sparingly and explain unavailable content when possible. * **Reduced motion** — use `no-animation` when motion should be minimized, or respect the user's `prefers-reduced-motion` setting. ## API reference ### `bq-accordion` properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------------------------------------- | ----------------------- | ---------- | | `appearance` | `appearance` | The appearance style of the accordion | `'filled'` \| `'ghost'` | `'filled'` | | `disabled` | `disabled` | If `true`, the accordion header is not interactive | `boolean` | `false` | | `expanded` | `expanded` | If `true`, the accordion panel is expanded | `boolean` | `false` | | `noAnimation` | `no-animation` | If `true`, disables the open/close animation | `boolean` | `false` | | `rotate` | `rotate` | If `true`, the expand icon rotates 180° when expanded instead of swapping | `boolean` | `false` | | `size` | `size` | The size of the accordion | `'small'` \| `'medium'` | `'medium'` | ### `bq-accordion-group` properties | Property | Attribute | Description | Type | Default | | ------------- | -------------- | -------------------------------------------------------------------- | ----------------------- | ---------- | | `appearance` | `appearance` | Appearance style applied to all child accordions | `'filled'` \| `'ghost'` | `'filled'` | | `expandAll` | `expand-all` | If `true`, all child accordions are expanded | `boolean` | `false` | | `noAnimation` | `no-animation` | If `true`, disables animation on all child accordions | `boolean` | `false` | | `multiple` | `multiple` | If `true`, multiple accordion items can be expanded at the same time | `boolean` | `false` | | `size` | `size` | Size applied to all child accordions | `'small'` \| `'medium'` | `'medium'` | ### Events | Event | Description | Type | | -------------- | ---------------------------------------------- | ------------------------------------- | | `bqBlur` | Fires when the accordion loses focus | `CustomEvent` | | `bqClick` | Fires when the accordion header is clicked | `CustomEvent` | | `bqFocus` | Fires when the accordion gets focus | `CustomEvent` | | `bqOpen` | Fires when the accordion panel starts to open | `CustomEvent` | | `bqAfterOpen` | Fires after the open transition has completed | `CustomEvent` | | `bqClose` | Fires when the accordion panel starts to close | `CustomEvent` | | `bqAfterClose` | Fires after the close transition has completed | `CustomEvent` | * In React, prefix events with `on`: `onBqBlur`, `onBqClick`, `onBqFocus`, `onBqOpen`, `onBqClose`, `onBqAfterOpen`, `onBqAfterClose`. * In Angular, use the event binding syntax: `(bqBlur)`, `(bqClick)`, `(bqFocus)`, `(bqOpen)`, `(bqClose)`, etc. * In Vue, use the `@` shorthand: `@bq-blur`, `@bq-click`, `@bq-focus`, `@bq-open`, `@bq-close`, etc. ### Slots #### `bq-accordion` | Slot | Description | | ----------- | ------------------------------------------------------------------------- | | *(default)* | The panel body content shown when the accordion is expanded | | `collapse` | Custom icon shown when the accordion is expanded (clicking will collapse) | | `expand` | Custom icon shown when the accordion is collapsed (clicking will expand) | | `header` | The accordion header label (the clickable trigger) | | `prefix` | Content before the header text — icon or avatar | | `suffix` | Content after the header text — icon or status indicator | #### `bq-accordion-group` | Slot | Description | | ----------- | ----------------------------------- | | *(default)* | One or more `bq-accordion` elements | ### Shadow parts #### `bq-accordion` | Part | Description | | -------- | ------------------------------------------------- | | `base` | The `
` element wrapping the accordion | | `header` | The `` element — the clickable header | | `panel` | The `
` containing the panel body content | | `prefix` | The `
` wrapping the prefix slot content | | `suffix` | The `
` wrapping the suffix slot content | | `text` | The `
` wrapping the header text slot content | #### `bq-accordion-group` | Part | Description | | ------ | ------------------------------------------- | | `base` | The wrapper `
` for the accordion group | ### CSS custom properties #### Size | Variable | Description | Default | | -------------------------------------- | -------------------------------------------- | ---------------------- | | `--bq-accordion--small-padding-y` | Small vertical padding | `var(--bq-spacing-xs)` | | `--bq-accordion--small-padding-start` | Small start padding | `var(--bq-spacing-s)` | | `--bq-accordion--small-padding-end` | Small end padding | `var(--bq-spacing-s)` | | `--bq-accordion--small-gap` | Small gap between prefix, title, and suffix | `var(--bq-spacing-xs)` | | `--bq-accordion--small-radius` | Small border radius | `var(--bq-radius--xs)` | | `--bq-accordion--medium-padding-y` | Medium vertical padding | `var(--bq-spacing-s)` | | `--bq-accordion--medium-padding-start` | Medium start padding | `var(--bq-spacing-m)` | | `--bq-accordion--medium-padding-end` | Medium end padding | `var(--bq-spacing-m)` | | `--bq-accordion--medium-gap` | Medium gap between prefix, title, and suffix | `var(--bq-spacing-m)` | | `--bq-accordion--medium-radius` | Medium border radius | `var(--bq-radius--m)` | #### Border (collapsed state) | Variable | Description | Default | | ---------------------------------------- | ---------------------- | ------------- | | `--bq-accordion--collapsed-border-color` | Collapsed border color | `transparent` | | `--bq-accordion--collapsed-border-style` | Collapsed border style | `none` | | `--bq-accordion--collapsed-border-width` | Collapsed border width | `unset` | #### Border (expanded state) | Variable | Description | Default | | --------------------------------------- | --------------------- | ------------- | | `--bq-accordion--expanded-border-color` | Expanded border color | `transparent` | | `--bq-accordion--expanded-border-style` | Expanded border style | `none` | | `--bq-accordion--expanded-border-width` | Expanded border width | `unset` | #### Filled appearance | Variable | Description | Default | | --------------------------------------------- | ---------------------------------- | ------------------------- | | `--bq-accordion--filled-collapsed-background` | Filled collapsed header background | `var(--bq-ui--secondary)` | | `--bq-accordion--filled-collapsed-text-color` | Filled collapsed header text color | `var(--bq-text--primary)` | | `--bq-accordion--filled-expanded-background` | Filled expanded header background | `var(--bq-ui--brand-alt)` | | `--bq-accordion--filled-expanded-text-color` | Filled expanded header text color | `var(--bq-text--primary)` | #### Ghost appearance | Variable | Description | Default | | -------------------------------------------- | --------------------------------- | ------------------------- | | `--bq-accordion--ghost-collapsed-background` | Ghost collapsed header background | `transparent` | | `--bq-accordion--ghost-collapsed-text-color` | Ghost collapsed header text color | `var(--bq-text--primary)` | | `--bq-accordion--ghost-expanded-background` | Ghost expanded header background | `transparent` | | `--bq-accordion--ghost-expanded-text-color` | Ghost expanded header text color | `var(--bq-text--brand)` | #### Panel — filled | Variable | Description | Default | | --------------------------------------------------- | ------------------------------------ | --------------------------- | | `--bq-accordion--panel-filled-border-color` | Filled panel border color | `var(--bq-stroke--primary)` | | `--bq-accordion--panel-filled-border-style` | Filled panel border style | `solid` | | `--bq-accordion--panel-filled-border-width` | Filled panel border width | `var(--bq-stroke-s)` | | `--bq-accordion--panel-small-filled-padding-y` | Small filled panel vertical padding | `var(--bq-spacing-s)` | | `--bq-accordion--panel-small-filled-padding-start` | Small filled panel start padding | `var(--bq-spacing-s)` | | `--bq-accordion--panel-small-filled-padding-end` | Small filled panel end padding | `var(--bq-spacing-s)` | | `--bq-accordion--panel-medium-filled-padding-y` | Medium filled panel vertical padding | `var(--bq-spacing-m)` | | `--bq-accordion--panel-medium-filled-padding-start` | Medium filled panel start padding | `var(--bq-spacing-m)` | | `--bq-accordion--panel-medium-filled-padding-end` | Medium filled panel end padding | `var(--bq-spacing-m)` | #### Panel — ghost | Variable | Description | Default | | -------------------------------------------------- | ----------------------------------- | ---------------------- | | `--bq-accordion--panel-ghost-border-color` | Ghost panel border color | `transparent` | | `--bq-accordion--panel-ghost-border-style` | Ghost panel border style | `none` | | `--bq-accordion--panel-ghost-border-width` | Ghost panel border width | `unset` | | `--bq-accordion--panel-small-ghost-padding-y` | Small ghost panel vertical padding | `var(--bq-spacing-s)` | | `--bq-accordion--panel-small-ghost-padding-start` | Small ghost panel start padding | `var(--bq-spacing-l)` | | `--bq-accordion--panel-small-ghost-padding-end` | Small ghost panel end padding | `var(--bq-spacing-l)` | | `--bq-accordion--panel-medium-ghost-padding-y` | Medium ghost panel vertical padding | `var(--bq-spacing-m)` | | `--bq-accordion--panel-medium-ghost-padding-start` | Medium ghost panel start padding | `var(--bq-spacing-xl)` | | `--bq-accordion--panel-medium-ghost-padding-end` | Medium ghost panel end padding | `var(--bq-spacing-xl)` | #### Group | Variable | Description | Default | | --------------------------- | -------------------------------------- | ---------------------- | | `--bq-accordion-group--gap` | Gap between accordion items in a group | `var(--bq-spacing-xs)` | Learn more about [styling with shadow parts](/guides/styles#component-shadow-dom-parts) and [CSS custom properties](/guides/styles#global-css-custom-properties). ## Resources Use Storybook to test behavior and states interactively, or review the source if you need implementation details. Explore all accordion configurations in Storybook View the component source on GitHub