Edit this page
[?] Component size, gzipped: 25kb

Accordion

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

    • Overrides

    Additionally, you can fully customize any part of the Accordion through the overrides prop. The Accordion consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

    Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

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

    API

    Accordion API

    accordion boolean = true

    Determines how many panels may be expanded at a time. If set to true it will collapse a current panel when a new panel is expanded. If set to false more than one panel may be expanded at a time.

    children ChildrenArray<Element<*>> required

    Accordion expandable items. See Panel API below for reference.

    ChildrenArrayElement*

    disabled boolean = false

    If set to true all its children panels will be disabled from toggling.

    initialState object = { expanded: [] }

    expanded required ArrayKey

    onChange function = () => undefined

    Handler called each time a panel is toggled. expanded prop is an array of Panel keys that are currently expanded.

    expanded required ArrayKey
     => mixed

    overrides { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<$Diff<object, object>> = {}

    { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }$Diff
    $color string
    $disabled nullable required boolean
    $expanded nullable boolean
    $size union One of
    string,
    number
    ,
    $expanded nullable boolean

    stateReducer function = (type, newState) => undefined

    Handler called each time the component state changes. Used to override default state-change functionality.

    function
    $Keys{ expand: "expand" },
    expanded required ArrayKey
    ,
    expanded required ArrayKey
    =>
    expanded required ArrayKey

    renderPanelContent boolean = false

    Allows users to render all child content whether a panel is expanded or not for SEO purposed

    Panel API

    children Node required

    The content visible when Panel is expanded.

    Node

    disabled boolean = false

    Defaults to the disabled value provided by the parent Accordion component.

    "aria-controls" string

    Id for a panel, when provided populates aria-controls attribute for panel button and content

    key Key

    The key of a Panel. Used to maintain list of expanded panels. Must be unique across children of the Accordion.

    Key

    onChange function = () => undefined

    Handler for individual Panel change events.

    expanded boolean required
    => mixed

    onClick function = () => undefined

    Handler for the Header's click events.

    Event => mixed

    onKeyDown function = () => undefined

    Handler for the Header's keyDown events.

    KeyboardEvent => mixed

    overrides { PanelContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Header: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ToggleIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Content: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<object>

    { PanelContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Header: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ToggleIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Content: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }
    $color string
    $disabled nullable required boolean
    $expanded nullable boolean
    $size union One of
    string,
    number

    title Node = ""

    The title of an accordion panel.

    Node

    renderPanelContent boolean

    Allows users to render all child content whether a panel is expanded or not for SEO purposed

    expanded boolean = false

    Defines if the panel is expanded. If set to true the panel is rendered expanded.

    Stateful Panel API

    initialState object

    Initial state of a stateful panel component. The expanded prop indicates if the panel is initially expanded. If set to true the panel will be expanded initially

    expanded boolean required

    onChange function

    expanded boolean required
    => mixed

    stateReducer function

    function
    $Keys{ expand: "expand" },
    expanded boolean required
    ,
    expanded boolean required
    =>
    expanded boolean required

    children Node required

    The content visible when Panel is expanded.

    Node

    disabled boolean

    Defaults to the disabled value provided by the parent Accordion component.

    "aria-controls" string

    Id for a panel, when provided populates aria-controls attribute for panel button and content

    key Key

    The key of a Panel. Used to maintain list of expanded panels. Must be unique across children of the Accordion.

    Key

    onChange function

    Handler for individual Panel change events.

    expanded boolean required
    => mixed

    onClick function

    Handler for the Header's click events.

    Event => mixed

    onKeyDown function

    Handler for the Header's keyDown events.

    KeyboardEvent => mixed

    overrides { PanelContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Header: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ToggleIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Content: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<object>

    { PanelContainer: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Header: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, ToggleIcon: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Content: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }
    $color string
    $disabled nullable required boolean
    $expanded nullable boolean
    $size union One of
    string,
    number

    title Node

    The title of an accordion panel.

    Node

    renderPanelContent boolean

    Allows users to render all child content whether a panel is expanded or not for SEO purposed

    Accordion exports

    You can import this module like so:

    import {Accordion} from 'baseui/accordion'

    It exports the following components or utility functions:

    • Accordion
    • Panel
    • StatefulPanel
    • StatefulPanelContainer
    • STATE_CHANGE_TYPE
    • StyledRoot
    • StyledPanelContainer
    • StyledHeader
    • StyledContent
    • StyledToggleIcon