Accordion

an accordion containing collapsible panels

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

activeIndex

Active panel index. If specified, Accordion will be a controlled component. This means that future panel changes will not work unless you subscribe to onActive function and update activeIndex accordingly.

0
[0, 2]

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"
"center"
"end"
"stretch"

animate

Transition content in & out with a slide down animation.
truefalse

children

Array of AccordionPanels.
"node"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

messages

Custom messages for Tabs. Used for accessibility by screen readers.
{
tabContents: string
}

multiple

Allow multiple panels to be opened at once.
truefalse

onActive

Function that will be called when the active index changes. It will always send an array with currently active panel indexes.

([0]) => {}

Accordion Panel

an accordion panel

Props

label

The panel label.
"string""node"

Theme

accordion.hover.heading.color

The text color of the heading when hovered. backward compatible with accordion.hover.color

{"dark": "light-4", "light": "dark-3"}

accordion.heading.level

The heading level.
"4"

accordion.heading.margin

The margin size around the heading.
string

accordion.icons.collapse

The icon to use when the panel is expanded.
<UpIcon />

accordion.icons.color

The icon color to use in the accordion.
string | { dark: string, light: string }

accordion.icons.expand

The icon to use when the panel is collapsed.
<DownIcon />

accordion.border.color

The border color to use in the accordion panel content.
"border"

accordion.border.side

The border side to use in the accordion panel content.
"bottom"

accordion.panel.border.color

The border color to use on the accordion panel.
string | { dark: string, light: string }

accordion.panel.border.side

The border side to use on the accordion panel.
string

accordion.panel.border.size

The border size of the accordion panel.
xsmall | small | medium | large | xlarge

accordion.panel.border.style

The border style of the accordion panel.
solid | dashed | dotted | double| groove | ridge | inset | outset | hidden