Accordion

A collapsible component for displaying content in a vertical stack.

Usage

React is a JavaScript library focused on building user interfaces.

Anatomy

Understanding the Accordion’s anatomy is crucial for proper setup:

Each component part is marked with a data-part attribute for easy DOM identification.

Animation

You can use CSS animations to create smooth transitions for opening and closing Accordion items. Utilize the data-state attribute in combination with the --height CSS variable to animate the open and closed states of Accordion.ItemContent.

@keyframes slideDown {
  from { height: 0; }
  to { height: var(--height); }
}

@keyframes slideUp {
  from { height: var(--height); }
  to { height: 0; }
}

[data-scope='accordion'][data-part='item-content'][data-state='open'] {
  animation: slideDown 250ms;
}

[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
  animation: slideUp 200ms;
}

Examples

Collapsible Panels

To create a collapsible Accordion where all panels can be closed simultaneously, utilize the collapsible prop:

React is a JavaScript library for building user interfaces.

Multiple Panels Open

For an Accordion that allows keeping multiple panels open, apply the multiple prop:

React is a JavaScript library for building user interfaces.

Accessing the Accordion API

For advanced control, access the Accordion API using a function as a child component:

Controlled Accordion

To manage the Accordion’s state, use the value prop and update it with the onValueChange event:

Changing Orientation

Set the Accordion’s orientation to vertical with the orientation prop:

Disabling an Accordion Item

Disable any Accordion Item using the disabled prop:

API Reference

Explore our detailed API Reference for further customization:

Item

PropTypeDefault
value
string
asChild
boolean
defaultOpen
boolean
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string; content: string; trigger: string }>
lazyMount
booleanfalse
onExitComplete
() => void
onOpenChange
(details: OpenChangeDetails) => void
open
boolean
unmountOnExit
booleanfalse

Root

PropTypeDefault
asChild
boolean
collapsible
booleanfalse
defaultValue
string[]
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string item(value: string): string content(value: string): string trigger(value: string): string }>
lazyMount
booleanfalse
multiple
booleanfalse
onFocusChange
(details: FocusChangeDetails) => void
onValueChange
(details: ValueChangeDetails) => void
orientation
'horizontal' | 'vertical'
unmountOnExit
booleanfalse
value
string[]

ItemContent

PropTypeDefault
asChild
boolean

ItemTrigger

PropTypeDefault
asChild
boolean

ItemIndicator

PropTypeDefault
asChild
boolean

Previous

Vanilla