Accordion

Displays an expandable/collapsible list of items.

The Accordion displays an expandable/collapsible list of items. The final Accordion component is a compound of the following:- Accordion: wraps a series of AccordionItems in a single component.

AccordionItem: wraps an AccordionButton and an AccordionPanel.
AccordionButton: contains the top-level items of the Accordion list. It is a clickable button that shows or hides the child items of a given AccordionItem.
AccordionPanel: contains the child items of a given AccordionItem.

Import

Import the component from @faststore/ui


_10import {
_10  Accordion,
_10  AccordionItem,
_10  AccordionButton,
_10  AccordionPanel,
_10} from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


_10@import '@faststore/ui/src/components/molecules/Accordion/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Example

Code

Shorts
Sweatshirt
Tank tops

Props

All accordion-related components support all attributes also supported by the <div> tag, except for the AccordionButton, which renders the <button> tag and inherits Button props.

Besides those attributes, the following props are also supported:

Accordion

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-accordion`
indices*	`Iterable<number>`	Indices that indicate which accordion items are opened.
onChange*	`(index: number) => void`	Function that is triggered when an accordion item is opened/closed.

AccordionItem

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-accordion-item`
index	`number`	Index of the current accordion item within the accordion.
prefixId	`string`	Namespace ID prefix for the current Accordion item's panel and button to avoid ID duplication when multiple instances are on the same page.

AccordionButton

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-accordion-button`
expandedIcon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component is rendered as an icon when the accordion is expanded.	`<Icon name="MinusCircle" data-icon="expanded" />`
collapsedIcon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component is rendered as an icon when the accordion is collapsed.	`<Icon name="PlusCircle" data-icon="collapsed" />`
variant	`"primary" \| "secondary" \| "tertiary"`	Specifies the component color variant.
size	`"small" \| "regular"`	Specifies the size variant.
inverse	`false \| true`	Defines the use of inverted colors.
disabled	`false \| true`	Specifies that this button should be disabled.
icon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.
loading	`false \| true`	Boolean that represents a loading state.
loadingLabel	`string`	Specifies a label for loading state.
iconPosition	`"left" \| "right"`	Specifies where the icon should be positioned

AccordionPanel

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-accordion-panel`

Design Tokens

Nested Elements

Item

Local token	Default value/Global token linked
`--fs-accordion-item-border-bottom-width`	`var(--fs-border-width)`
`--fs-accordion-item-border-bottom-color`	`var(--fs-border-color-light)`

Button

Local token	Default value/Global token linked
`--fs-accordion-button-padding`	`var(--fs-spacing-3) 0`
`--fs-accordion-button-font-size`	`var(--fs-text-size-3)`
`--fs-accordion-button-font-weight`	`var(--fs-text-weight-bold)`
`--fs-accordion-button-line-height`	`1.2`
`--fs-accordion-button-color`	`var(--fs-color-text)`
`--fs-accordion-button-bkg-color`	`transparent`

Panel

Local token	Default value/Global token linked
`--fs-accordion-panel-padding-bottom`	`var(--fs-spacing-4)`

Customization

data-fs-accordion

data-fs-accordion-item

data-fs-accordion-button

data-fs-accordion-panel

The AccordionButton component inherits Button CSS selectors.

Examples

Multiple and Collapsible

Example

Code

Shorts
Sweatshirt
Tank tops

One Collapsible at a Time

Example

Code

Shorts
Sweatshirt
Tank tops