Component size, gzipped: 19kb

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

Accordion basic usage

Accordion SEO Friendly

  • 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.
  • 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.
  • 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

Stateless Accordion

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

NameTypeDescription
children
An array of Panel components.
disabled
Renders component in disabled state.
onChange
Called when a panel is expanded.
overrides
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: