Stable in React

Accordion

A set of collapsible panels with headings.

Loading React 19.3.1…

Hover a part or use it. The code follows. · Loading React…

241Tests passing in React · 0 failing

11.6 KiBSize

1.90 msOpen

0.90 msClose

0.27 MiBMemory

productdevbook and 18 upstream authors7 commits · last Nov 4

Install#

One package per framework. Accordion's parts come from it; the anatomy tab at the top shows how they nest.

bun add @▢▢▢▢/react

Five parts. The example uses five of them; the data does not say which are required.

Accordion.RootGroups all parts of the accordion.
Accordion.ItemGroups an accordion header with the corresponding panel.
Accordion.HeaderA heading that labels the corresponding panel.
Accordion.TriggerA button that opens and closes the corresponding panel.
Accordion.PanelA collapsible panel with the accordion item contents.

Examples#

Common ways to put it to work. Each one runs live.

multiple lets several panels stay open at once.

AccordionMultiple.tsx

Styling and accessibility#

The parts ship no styles. Style their states with these attributes; the CSS tab at the top has a sheet. The same CSS works in all five frameworks.

[data-disabled]Present when the accordion is disabled. On Root, Item, Header, Trigger, Panel.
[data-orientation]Indicates the orientation of the accordion. On Root, Panel.
[data-index]Indicates the index of the accordion item. On Item, Header, Trigger, Panel.
[data-open]Present when the accordion item is open. On Item, Header, Panel.
[data-panel-open]Present when the accordion panel is open. On Trigger.
[data-starting-style]Present when the panel begins animating in. On Panel.
[data-ending-style]Present when the panel is animating out. On Panel.
--accordion-panel-heightThe accordion panel's height. On Panel.
--accordion-panel-widthThe accordion panel's width. On Panel.

Keyboard

EnterSpaceOpens or closes the item's panel On Trigger.
SpaceToggles on key up, as a native button does, also when Trigger renders another element On Trigger.

Set for you

renders an <h3>each trigger sits in the page's heading outlineHeader
aria-expanded, aria-controls to its panel while opena screen reader says whether the section is open and where it isTrigger
role="region", aria-labelledby to its triggerthe open panel is a landmark named by its headingPanel
hidden="until-found" with hiddenUntilFoundfind in page reaches text in a closed panel and opens itPanel

API reference#

15 props across 5 parts, in React syntax, and className, style, render once for every part. Open a row to try it.

Filter props

Accordion · all parts

Shared propsEvery part that renders an element takes these.

classNameCSS class applied to the element, or a function that returns a class based on the component's state.string | ((state: State) => string | undefined)

styleStyle applied to the element, or a function that returns a style object based on the component's state.React.CSSProperties | ((state: State) => React.CSSProperties | undefined)

renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, State>

Use it in React#

What differs from the React API. Switch the framework at the top of the page.

@▢▢▢▢/react is the React 19 package. Its parts, props, data attributes and error messages are upstream Base UI's, and upstream's own tests run against it.

Parts
Each component is its own entry point and exports one namespace named after it.
```
import { Switch } from '@base-ui-next/react/switch'

export function Example() {
  return (
    <Switch.Root>
      <Switch.Thumb />
    </Switch.Root>
  )
}
```
A part renders the element its API reference names, such as a <span> for Switch.Root.
Props and events
Props and callbacks have upstream's names and signatures: onCheckedChange(checked, details), onOpenChange(open, details), onValueChange(value, details). details carries reason, event, cancel() and allowPropagation(). Native handlers are React's (onClick, onKeyDown), and event.preventBaseUIHandler() stops a part's own handler.
Styling
className takes a string or a function (state) => string; style takes an object or a function (state) => object. The state's data-* attributes are on the element for CSS.
render
render takes an element (render={<a href="/docs" />}) or a function (props, state) => element that spreads props on what it returns.
Refs
ref reaches the part's element. Imperative handles are ref props, as upstream: inputRef, and actionsRef ({ validate } on Field and Form, { unmount, close } on Dialog).
Binding
A part is controlled when its value prop (checked, open, value) is set, and uncontrolled with the default form (defaultChecked, defaultOpen, defaultValue). React has no two-way binding: pair the value with its change callback.
From @base-ui/react
Change the import from @base-ui/react/<component> to @▢▢▢▢/react/<component>.
From @base-ui/react
Nothing else changes: props, parts, data attributes and errors are the same.