Accordion

Accordion

On this page

Import

Single Panel

Loading preview
Open in Storybook

Group Panel

Loading preview
Open in Storybook

Text Panel

Loading preview
Open in Storybook

Props

Accordion Props

NameDescriptionDefault
id*

Unique identifier for the Accordion component.

string		-
shouldAllowMultipleExpanded

If true, multiple accordion panels can be expanded at the same time.

boolean		true
defaultOpenPanelIds

Array of panel IDs that are expanded by default in uncontrolled mode.

string[]		-
openPanelIds

Array of panel IDs that are expanded in controlled mode.

string[]		-
isBordered

If true, applies border to the panel container.

boolean		true
onAccordionToggle

Callback function called when a panel is toggled. Used in controlled mode.

((event: MouseEvent<Element, MouseEvent>, panelId: string) => void)		-
children

Children components to be rendered within the accordion.

ReactNode		-

Accordion Panel Props

NameDescriptionDefault
id*

Unique identifier for the AccordionPanel component.

string		-
icon

Icon displayed within the accordion panel.

ReactNode		-
heading

Heading displayed on the accordion panel.

ReactElement<any, string | JSXElementConstructor<any>>		-
subText

Sub-text or additional information displayed on the accordion panel.

string		-
children

Child elements to be rendered within the accordion panel.

ReactNode		-
chevronPosition

Position of the chevron icon (left or right of heading). Defaults to 'end'.

"start" | "end"		end
onClick

Event handler for button click.

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)		-
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
ref
((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null		-
className

Additional CSS class names for styling.

string		-
reactlytics
ReactlyticsProp		-
shouldShowIcons

If true, shows icons beside the accordion button.

boolean		-
shouldUseUnstyledButton

If true, unstyled button will be used.

boolean		-

Accordion Content Props

NameDescriptionDefault
aria-labelledby*

Unique identifier corresponding to the panel ID.

string		-
children*

Child elements to be rendered inside the accordion content.

ReactNode		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.