Component size, gzipped: 18kb

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

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.

Accordion as a stateful component

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

    API

    Accordion props

    An array of Panel components.
    Renders component in disabled state.
    Called when a panel is expanded.
    Lets you customize all aspects of the component.

    Accordion exports

    You can import this module like so:

    import {Accordion} from 'baseui/accordion'

    It exports the following components or utility functions: