Accordion

An unstyled, accessible accordion component with compound composition.

Build fully custom collapsible content sections with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Accordion with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with six sub-components: Root, Panel, Header, Trigger, Content, Indicator
Single or multiple panel expansion

Usage#

import { Accordion } from 'primereact/accordion';

<Accordion.Root>
    <Accordion.Panel>
        <Accordion.Header>
            <Accordion.Trigger>
                <Accordion.Indicator />
            </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content />
    </Accordion.Panel>
</Accordion.Root>

Behavior#

Motion Animation#

Use motionProps on Root to configure open/close animations.

<Accordion.Root motionProps={{ name: 'accordion-slide', cssVarPrefix: 'accordion-content', hideStrategy: 'none' }}>...</Accordion.Root>

See Motion for animation phases, CSS variables, and hide strategies.

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element or use a custom React component.

<Accordion.Root as="section">
    <Accordion.Panel as="article">
        <Accordion.Header as="h3">
            <Accordion.Trigger as="div">...</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content as="section">...</Accordion.Content>
    </Accordion.Panel>
</Accordion.Root>

Custom components receive all the props that would be applied to the default element:

<Accordion.Trigger as={MyCustomButton}>...</Accordion.Trigger>

Default elements: Root=div, Panel=div, Header=div, Trigger=button, Content=div, Indicator=span.

Render Function Children#

Content accepts a render function as children, providing access to the component instance. The instance exposes accordion (root instance), accordionpanel (parent panel instance), and motion (animation state).

<Accordion.Content>{(instance) => <div>Panel is {instance.accordionpanel?.state.open ? 'open' : 'closed'}</div>}</Accordion.Content>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

What is this service about?

Is my data secure?

Can I upgrade or downgrade my plan later?

/* Select a part to see its CSS selector for custom styling */

API#

AccordionRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: AccordionRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: AccordionRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`AccordionRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<AccordionRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: AccordionRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`defaultValue`	`string` \| `number` \| `(string` \| `number)[]`	—
Default value of the active panel or an array of values in multiple mode.
`value`	`string` \| `number` \| `(string` \| `number)[]`	—
Value of the active panel or an array of values in multiple mode.
`multiple`	`boolean`	`false`
When enabled, multiple tabs can be activated at the same time.
`disabled`	`boolean`	`false`
When disabled, the component cannot be interacted with.
`openOnFocus`	`boolean`	`false`
When enabled, the accordion panel will be opened on focus.
`lazy`	`boolean`	`false`
When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
`motionProps`	`MotionOptions & Pick<useMotionProps, "hideStrategy">`	—
Used to configure the motion of the accordion content.
`tabIndex`	`number`	`0`
Index of the element in tabbing order.
`onValueChange`	`(event: AccordionRootValueChangeEvent) => void`	—
Callback fired when the accordion's value changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"accordion"`
`data-part`	`"root"`
`data-disabled`	Present when disabled

Defines passthrough(pt) options of Accordion component.

label	type	description
root	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
panel	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the panel's DOM element.
header	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the header's DOM element.
trigger	AccordionRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the trigger's DOM element.
content	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
contentOuter	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content outer wrapper's DOM element.
contentInner	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content inner wrapper's DOM element.
indicator	AccordionRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the indicator's DOM element.

AccordionPanel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: AccordionPanelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: AccordionPanelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`AccordionPanelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<AccordionPanelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: AccordionPanelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `number`	—
Unique value of item.
`disabled`	`boolean`	`false`
Whether the item is disabled.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"accordion"`
`data-part`	`"panel"`
`data-open`	Present when expanded
`data-closed`	Present when collapsed
`data-disabled`	Present when disabled

Defines passthrough(pt) options of AccordionPanel component.

label	type	description
root	AccordionPanelPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

AccordionHeader#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: AccordionHeaderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: AccordionHeaderInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`AccordionHeaderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<AccordionHeaderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: AccordionHeaderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"accordion"`
`data-part`	`"header"`
`data-open`	Present when expanded
`data-closed`	Present when collapsed

Defines passthrough(pt) options of AccordionHeader component.

label	type	description
root	AccordionHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

AccordionTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: AccordionTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: AccordionTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`AccordionTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<AccordionTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: AccordionTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"accordion"`
`data-part`	`"trigger"`
`data-content-open`	Present when content open
`data-content-closed`	Present when content closed
`data-disabled`	Present when disabled

Defines passthrough(pt) options of AccordionTrigger component.

label	type	description
root	AccordionTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

AccordionContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: AccordionContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: AccordionContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`AccordionContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<AccordionContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: AccordionContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"accordion"`
`data-part`	`"content"`
`data-open`	Present when expanded
`data-closed`	Present when collapsed
`data-disabled`	Present when disabled

Defines passthrough(pt) options of AccordionContent component.

label	type	description
root	AccordionContentPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

AccordionIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: AccordionIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: AccordionIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`AccordionIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<AccordionIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: AccordionIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`match`	`"open"` \| `"closed"`	—
Determines the visibility of the indicator based on the state of the accordion panel. Valid values are: - "open": Indicator is visible when the panel is expanded. - "closed": Indicator is visible when the panel is collapsed.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"accordion"`
`data-part`	`"indicator"`
`data-open`	Present when expanded
`data-closed`	Present when collapsed

Defines passthrough(pt) options of AccordionIndicator component.

label	type	description
root	AccordionIndicatorPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Accordion headers are buttons. They use aria-controls to reference the content region and aria-expanded to reflect visibility state. The announced label can be customized with aria-label or aria-labelledby via pt.

The content uses role="region" and an id that matches the header button's aria-controls.

Header Keyboard Support#

Key	Function
`tab`	Moves focus to the next focusable element in the page tab sequence.
`shift + tab`	Moves focus to the previous focusable element in the page tab sequence.
`enter`	Toggles the visibility of the content.
`space`	Toggles the visibility of the content.
`down arrow`	Moves focus to the next header. If focus is on the last header, moves focus to the first header.
`up arrow`	Moves focus to the previous header. If focus is on the first header, moves focus to the last header.
`home`	Moves focus to the first header.
`end`	Moves focus to the last header.