Component size, gzipped: 20kb

Accordion

children

<Panel title="Panel 1">
  Content 1
</Panel>
<Panel title="Panel 2">
  Content 2
</Panel>
<Panel title="Panel 3">
  Content 3
</Panel>

<Panel title="Panel 1">
  Content 1
</Panel>
<Panel title="Panel 2">
  Content 2
</Panel>
<Panel title="Panel 3">
  Content 3
</Panel>

onChange

({expanded}) => console.log(expanded)

({expanded}) => console.log(expanded)

disabled

import * as React from "react";
import { Accordion, Panel } from "baseui/accordion";

export default () => {
  return (
    <Accordion
      onChange={({ expanded }) => console.log(expanded)}
    >
      <Panel title="Panel 1">Content 1</Panel>
      <Panel title="Panel 2">Content 2</Panel>
      <Panel title="Panel 3">Content 3</Panel>
    </Accordion>
  );
}

import * as React from "react";
import { Accordion, Panel } from "baseui/accordion";
export default () => {
  return (
    <Accordion
      onChange={({ expanded }) => console.log(expanded)}
    >
      <Panel title="Panel 1">Content 1</Panel>
      <Panel title="Panel 2">Content 2</Panel>
      <Panel title="Panel 3">Content 3</Panel>
    </Accordion>
  );
}

API

Accordions display a list of high-level options that can expand/contract to reveal more detailed information.

Accessibility

tab, shift + tab - to switch between panels.
space or enter - when focus is on the accordion panel header it will toggle (expand or collapse) the currently focused panel.

Examples

Custom Accordion

Panel 1
Custom Panel

Accordion basic usage

Accordion panel 1
Accordion panel 2
Accordion panel 3

Accordion custom title

Custom Title 1
Custom Title 2
Custom Title 2

Accordion SEO Friendly

Accordion panel 1
Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.
Accordion panel 2
Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.
Accordion panel 3
Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.

Using a stateful panel component on it's own

Expandable panel

Stateless Accordion

Panel 1
Panel 2
Panel 3

If you want to control the expanded state of the accordion panels yourself, you can use the stateless version of our accordion: StatelessAccordion. You can pass a list of React keys to expanded, which corresponds to the keys of the Panels that you want to be expanded.

The onChange handler is called when one of the Panels would ordinarily be opened. It passes both the key of the Panel that caused the handler to fire as well as an updated expanded list. You can choose to use the new expanded list or key however you like to update your state. Note, by default the new expanded list will assume only one panel can be open at a time, but if you pass accordion={false} the expanded list will assume multiple can be open simultaneously.

The StatelessAccordion gives you the flexibility to control the accordion as you like while still offering some convenience to cover the normal use cases.

API

Accordion props

Name	Type	Description
children	react node	An array of Panel components.
disabled	boolean	Renders component in disabled state.
onChange	function	Called when a panel is expanded.
overrides	custom	Lets you customize all aspects of the component.

Note: the Panel has the same overrides as Accordion, with the exception of the Root subcomponent.

Accordion exports

You can import this module like so:

import {Accordion} from 'baseui/accordion'

It exports the following components or utility functions: