Accordion

Accordion displays a vertically stacked set of panels that each expand or collapse to reveal their content. Use when content needs to be hidden by default to reduce cognitive load, such as FAQs or settings groups.

Code

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>

    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>

    <AccordionContent>
      Yes. It comes with default styles that matches the other components.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>

    <AccordionContent>Yes. It&apos;s animated by default.</AccordionContent>
  </AccordionItem>
</Accordion>

API

Accordion

Name	Type/Description
className	string | ((state: State<any>) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
defaultValue	AccordionValue<any> | undefined The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the `value` prop instead.
disabled = false	boolean | undefined Whether the component should ignore user interaction.
hiddenUntilFound = false	boolean | undefined Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM.
keepMounted = false	boolean | undefined Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used.
loopFocus	boolean | undefined Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior. @deprecated
multiple = false	boolean | undefined Whether multiple items can be open at the same time.
onValueChange	((value: AccordionValue<any>, eventDetails: AccordionRootChangeEventDetails) => void) | undefined Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument.
orientation = "'vertical'"	Orientation | undefined Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. This prop no longer affects keyboard focus behavior. @deprecated
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, State<any>> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: State<any>) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.
value	AccordionValue<any> | undefined The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the `defaultValue` prop instead.

AccordionContent

Name	Type/Description
className	string | ((state: AccordionPanelState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
hiddenUntilFound = false	boolean | undefined Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM.
keepMounted = false	boolean | undefined Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionPanelState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: AccordionPanelState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.

AccordionItem

Name	Type/Description
className	string | ((state: AccordionItemState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
disabled = false	boolean | undefined Whether the component should ignore user interaction.
onOpenChange	((open: boolean, eventDetails: AccordionItemChangeEventDetails) => void) | undefined Event handler called when the panel is opened or closed.
ref	((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionItemState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: AccordionItemState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.
value	any A unique value that identifies this accordion item. If no value is provided, a unique ID will be generated automatically. Use when controlling the accordion programmatically, or to set an initial open state. @example ```tsx <Accordion.Root value={['a']}> <Accordion.Item value="a" /> // initially open <Accordion.Item value="b" /> // initially closed </Accordion.Root> ```

AccordionTrigger

Name	Type/Description
className	string | ((state: AccordionTriggerState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
nativeButton = true	boolean | undefined Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
ref	((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AccordionTriggerState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	CSSProperties | ((state: AccordionTriggerState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.