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.

Accordion basic usage

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

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.

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:

Some sample content
Some sample content
Some sample content

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

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>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }<$Diff<object, object>> = {}

{ Root: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }$Diff
$disabled nullable required boolean
$expanded nullable boolean
$as string
$style nullable Object
$ref Refany
,
$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

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.

expanded boolean = false

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

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>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, Header: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, ToggleIcon: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, Content: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }<object>

{ PanelContainer: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, Header: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, ToggleIcon: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, Content: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }
$disabled nullable required boolean
$expanded nullable boolean
$as string
$style nullable Object
$ref Refany

title Node = ""

The title of an accordion panel.

Node

Stateful Panel API

children Node required

The content visible when Panel is expanded.

Node

disabled boolean

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

expanded boolean

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

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>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, Header: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, ToggleIcon: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, Content: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }<object>

{ PanelContainer: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, Header: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, ToggleIcon: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>>, Content: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }
$disabled nullable required boolean
$expanded nullable boolean
$as string
$style nullable Object
$ref Refany

title Node

The title of an accordion panel.

Node