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

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.

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

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

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