Free
Pro

Accordion

Base UI (Angular) accordion is a stacked set of headers that show or hide a body. Copy accordion in, set multi if several panels may be open, and bind isOpen when you need controlled items. It is for in-page disclosure, not top-level app navigation.

When to use

  • FAQs, long settings groups, and optional details on a single page.
  • When headings should remain visible while bodies collapse.

When not to use

  • Primary navigation — use tabs, sidenav, or routes.
  • One show/hide region — a single disclosure or drawer is lighter.

Install with npx base-ui-cli add accordion.

free

Default Accordion

Default Accordion examples below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.


HTML

Accordion width disabled section

To make a section disabled need to add to the <base-accordion-item-body> tag a property [disabled]="true"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus.


HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add accordion

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add accordion
// Paths are relative to aliases.components (default: src/app/components)
import { AccordionItemBodyComponent } from './accordion/accordion-item/accordion-item-body/accordion-item-body.component';
import { AccordionItemHeaderComponent } from './accordion/accordion-item/accordion-item-header/accordion-item-header.component';
import { AccordionItemComponent } from './accordion/accordion-item/accordion-item.component';
import { AccordionComponent } from './accordion/accordion.component';

@Component({
  selector: 'app-your-component',
  imports: [
    AccordionComponent,
    AccordionItemBodyComponent,
    AccordionItemComponent,
    AccordionItemHeaderComponent
  ],
  template: `...`
})
export class YourComponent {}

API for accordion — generated from JSDoc in the library source.

API reference for accordion
APIMemberTypeDefaultDescription
base-accordionclassstring''Additional host CSS classes (merged via cn()).
base-accordionmultibooleanfalse—
base-accordion-itemclassstring''Additional host CSS classes (merged via cn()).
base-accordion-itemisOpenbooleanfalseTwo-way bindable open state — parent accordion can close it via item.isOpen.set(false).
base-accordion-itemdisabledbooleanfalse—
base-accordion-item(toggled)boolean — Emitted when the item is toggled. Carries the new open state.
base-accordion-item-body—— — The body content of an accordion item.
base-accordion-item-bodyclassstring''Additional host CSS classes (merged via cn()).
base-accordion-item-header—— — The clickable header of an accordion item that toggles the body visibility.