A vertically stacked set of interactive headings that each reveal an associated section of content.
import React from 'react';import * as Accordion from '@radix-ui/react-accordion';import classNames from 'classnames';import { ChevronDownIcon } from '@radix-ui/react-icons';import './styles.css';const AccordionDemo = () => (<Accordion.Root className="AccordionRoot" type="single" defaultValue="item-1" collapsible><Accordion.Item className="AccordionItem" value="item-1"><AccordionTrigger>Is it accessible?</AccordionTrigger><AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent></Accordion.Item><Accordion.Item className="AccordionItem" value="item-2"><AccordionTrigger>Is it unstyled?</AccordionTrigger><AccordionContent>Yes. It's unstyled by default, giving you freedom over the look and feel.</AccordionContent></Accordion.Item><Accordion.Item className="AccordionItem" value="item-3"><AccordionTrigger>Can it be animated?</AccordionTrigger><Accordion.Content className="AccordionContent"><div className="AccordionContentText">Yes! You can animate the Accordion with CSS or JavaScript.</div></Accordion.Content></Accordion.Item></Accordion.Root>);const AccordionTrigger = React.forwardRef(({ children, className, ...props }, forwardedRef) => (<Accordion.Header className="AccordionHeader"><Accordion.Trigger className={classNames('AccordionTrigger', className)} {...props} ref={forwardedRef} >{children}<ChevronDownIcon className="AccordionChevron" aria-hidden /></Accordion.Trigger></Accordion.Header>));const AccordionContent = React.forwardRef(({ children, className, ...props }, forwardedRef) => (<Accordion.Content className={classNames('AccordionContent', className)} {...props} ref={forwardedRef} ><div className="AccordionContentText">{children}</div></Accordion.Content>));export default AccordionDemo;
Full keyboard navigation.
Supports horizontal/vertical orientation.
Supports Right to Left direction.
Can expand one or multiple items.
Can be controlled or uncontrolled.
Install the component from your command line.
Import all parts and piece them together.
Contains all the parts of an accordion.
Contains all the parts of a collapsible section.
Wraps an Accordion.Trigger
. Use the asChild
prop to update it to the appropriate heading level for your page.
Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.Header
.
Contains the collapsible content for an item.
Use the defaultValue
prop to define the open item by default.
Use the collapsible
prop to allow all items to close.
Set the type
prop to multiple
to enable opening multiple items at once.
You can add extra decorative elements, such as chevrons, and rotate it when the item is open.
Use the orientation
prop to create a horizontal accordion.
Use the --radix-accordion-content-width
and/or --radix-accordion-content-height
CSS variables to animate the size of the content when it opens/closes:
Adheres to the Accordion WAI-ARIA design pattern.