---
title: Accordion
slug: accordion
section: components
description: .
---

# Accordion
<Description>
    {"A vertically stacked set of interactive headings that each reveal an associated section of content."}
</Description>

<ComponentPreview name="accordion" file="accordion-demo" />


[//]: # (<ComponentPreview name="accordion" file="accordion-multiple-demo" />)

<FeatureList items={[
    '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
<PropsTable name="RdxAccordionRootDirective" />

<EmitsTable name="RdxAccordionRootDirective" />

<DataAttributesTable attributes={[
    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }]
} />


### Item
Contains all the parts of a collapsible section.

<PropsTable name="RdxAccordionItemDirective" />

<DataAttributesTable attributes={[
    { name: '[data-state]', value: '"open" | "closed"' },
    { name: '[data-disabled]', value: 'Present when disabled' },
    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }
]} />

### Header

Wraps an `rdxAccordionTrigger`.
<DataAttributesTable attributes={[
    { name: '[data-state]', value: '"open" | "closed"' },
    { name: '[data-disabled]', value: 'Present when disabled' },
    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }
]} />

### Trigger

Toggles the collapsed state of its associated item. It should be nested inside an `rdxAccordionHeader`.
<DataAttributesTable attributes={[
    { name: '[data-state]', value: '"open" | "closed"' },
    { name: '[data-disabled]', value: 'Present when disabled' },
    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }
]} />

### Content

Contains the collapsible content for an item.
<DataAttributesTable attributes={[
    { name: '[data-state]', value: '"open" | "closed"' },
    { name: '[data-disabled]', value: 'Present when disabled' },
    { name: '[data-orientation]', value: '"vertical" | "horizontal"' }
]} />

<CSSVariablesTable attributes={[
    { name: '--radix-accordion-content-width', value: 'The width of the content when it opens/closes' },
    { name: '--radix-accordion-content-height', value: 'The height of the content when it opens/closes' }
]} />
