grommet
docs
components

Accordion

an accordion containing collapsible panels

Storybook
CodeSandbox
Github

Using Grommet for HPE?See Accordion examples and guidance.

Props

a11yTitle

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

string
"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.

number
0
array

Can be an array if multiple prop is true.

[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.

string
"start"
"center"
"end"
"stretch"
"baseline"

animate

Transition content in and out with a slide down animation.

boolean
true
false

children

Array of AccordionPanels.

node
<AccordionPanel>...</AccordionPanel>

gridArea

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

string
"a parent grid area name"

margin

The amount of margin around the component.

string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

messages

Custom messages for Tabs. Used for accessibility by screen readers.

object

{
  tabContents: "Tab Contents"
}

multiple

Allow multiple panels to be opened at once.

boolean
true
false

onActive

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

function
([0]) => {}

React/DOM Properties

At its core, the Accordion component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

AccordionPanel

an accordion panel.

Props

label

The panel label.

string
"label"
node
<Box>...</Box>

React/DOM Properties

At its core, the AccordionPanel component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

accordion.hover.background

The background of the accordion panel when hovered.

string

A hex, name, or rgb value.

"background-contrast"
object

An object with a color for dark and light modes.

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

Any supported Box background.


{
  color: "neutral-1",
  dark: true,
  opacity: true,
  position: "bottom",
  repeat: "no-repeat",
  size: "cover",
  image: "url(//my.com/assets/img.png)"
}

accordion.hover.heading.color

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

string

A hex, name, or rgb value.

"brand"
object

An object with a color for dark and light modes.

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

accordion.heading.level

The heading level.

number
4

accordion.heading.margin

The margin size around the heading.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"small"

accordion.icons.collapse

The icon to use when the panel is expanded.

element
<FormUp />

accordion.icons.color

The icon color to use in the accordion.

A hex, name, or rgb value.

"control"

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

accordion.icons.expand

The icon to use when the panel is collapsed.

element
<FormDown />

accordion.border.color

The border color to use in the accordion panel content.

string

A hex, name, or rgb value.

"border"
object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

accordion.border.side

The border side to use in the accordion panel content.

string
"bottom"

accordion.panel.border.color

The border color to use on the accordion panel.

string

A hex, name, or rgb value.

"brand"
object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

accordion.panel.border.side

The border side to use on the accordion panel.

string
"bottom"

accordion.panel.border.size

The border size of the accordion panel.

string
"xsmall"
"small"
"medium"
"large"
"xlarge"

accordion.panel.border.style

The border style of the accordion panel.

string
"solid"
"dashed"
"dotted"
"double"
"groove"
"ridge"
"inset"
"outset"
"hidden"