Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Loading...
import { Component } from '@angular/core';
import {
RdxAccordionContentDirective,
RdxAccordionHeaderDirective,
RdxAccordionItemDirective,
RdxAccordionRootDirective,
RdxAccordionTriggerDirective
} from '@radix-ng/primitives/accordion';
import { ChevronDown, LucideAngularModule, X } from 'lucide-angular';
@Component({
selector: 'accordion-demo',
standalone: true,
imports: [
RdxAccordionRootDirective,
RdxAccordionItemDirective,
RdxAccordionHeaderDirective,
RdxAccordionTriggerDirective,
RdxAccordionContentDirective,
LucideAngularModule
],
template: `
<div class="AccordionRoot" [defaultValue]="'item-1'" rdxAccordionRoot>
<div class="AccordionItem" [value]="'item-1'" rdxAccordionItem>
<div class="AccordionHeader" rdxAccordionHeader>
<button class="AccordionTrigger" type="button" rdxAccordionTrigger>
Is it accessible?
<lucide-angular class="AccordionChevron" [img]="ChevronDownIcon" size="16" />
</button>
</div>
<div class="AccordionContent" rdxAccordionContent>
<div class="AccordionContentText">Yes. It adheres to the WAI-ARIA design pattern.</div>
</div>
</div>
<div class="AccordionItem" [value]="'item-2'" rdxAccordionItem>
<div class="AccordionHeader" rdxAccordionHeader>
<button class="AccordionTrigger" type="button" rdxAccordionTrigger>
Is it unstyled?
<lucide-angular class="AccordionChevron" [img]="ChevronDownIcon" size="16" />
</button>
</div>
<div class="AccordionContent" rdxAccordionContent>
<div class="AccordionContentText">
Yes. It's unstyled by default, giving you freedom over the look and feel.
</div>
</div>
</div>
<div class="AccordionItem" [value]="'item-3'" rdxAccordionItem>
<div class="AccordionHeader" rdxAccordionHeader>
<button class="AccordionTrigger" type="button" rdxAccordionTrigger>
Can it be animated?
<lucide-angular class="AccordionChevron" [img]="ChevronDownIcon" size="16" />
</button>
</div>
<div class="AccordionContent" rdxAccordionContent>
<div class="AccordionContentText">Yes! You can animate the Accordion with CSS or JavaScript.</div>
</div>
</div>
</div>
`,
styleUrl: 'accordion-demo.css'
})
export class AccordionDemoComponent {
readonly ChevronDownIcon = ChevronDown;
protected readonly XIcon = X;
}

Features

  • Full keyboard navigation.
  • Supports horizontal/vertical orientation.
  • Supports Right to Left direction.
  • Can expand one or multiple items.
  • Can be controlled or uncontrolled.

API Reference

Root

Prop Type Default
defaultValue
[] | string
-
disabled
boolean
-
orientation
RdxAccordionOrientation
'vertical'
type
RdxAccordionType
'single'
value
[] | string
-
onValueChange
EventEmitter<void>
new EventEmitter<void>()
Data attribute Values
[data-orientation]
"vertical" | "horizontal"

Item

Contains all the parts of a collapsible section.

Prop Type Default
disabled
boolean
-
expanded
boolean
-
value
string
-
closed
EventEmitter<void>
new EventEmitter<void>()
expandedChange
EventEmitter<boolean>
new EventEmitter<boolean>()
opened
EventEmitter<void>
new EventEmitter<void>()
Data attribute Values
[data-state]
"open" | "closed"
[data-disabled]
Present when disabled
[data-orientation]
"vertical" | "horizontal"

Wraps an rdxAccordionTrigger.

Data attribute Values
[data-state]
"open" | "closed"
[data-disabled]
Present when disabled
[data-orientation]
"vertical" | "horizontal"

Trigger

Toggles the collapsed state of its associated item. It should be nested inside an rdxAccordionHeader.

Data attribute Values
[data-state]
"open" | "closed"
[data-disabled]
Present when disabled
[data-orientation]
"vertical" | "horizontal"

Content

Contains the collapsible content for an item.

Data attribute Values
[data-state]
"open" | "closed"
[data-disabled]
Present when disabled
[data-orientation]
"vertical" | "horizontal"
CSS Variable Description
--radix-accordion-content-width The width of the content when it opens/closes
--radix-accordion-content-height The height of the content when it opens/closes