Component size, gzipped: 16kb

Accordion

Loading
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

    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.

    Accordion exports

    You can import this module like so:

    import {Accordion} from 'baseui/accordion'

    It exports the following components or utility functions: