Accordion

Basic

Default open

• You can set the default open item by passing the defaultOpenId prop to the Accordion component.

• By default, multiple prop is set to false. So, set defaultOpenId as a string:

• When multiple prop is set to true, set defaultOpenId as an array of strings:

Controlled openId state

• You can control Accordion state with openId and onChange props.

• By default, multiple prop is set to false. So, set openId as string:

• When multiple prop is set to true, set openId as an array of strings:

Sizes

• Accordion supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.

• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

Arrow position

• Arrow position can be changed by passing the arrowPosition prop on the Accordion component.
• Default arrow position is right.

Custom AccordionControl label

Custom arrow icon

• Use the arrowIcon prop on the AccordionControl component to change the indicator icon. The component handles the turning transition automatically.

Disabled

• Disabled state can be enabled by setting disabled prop to true on AccordionItem component.

Stacked

• Accordion can be stacked by setting the stacked prop to true.
• By default, Accordion will be separated.

Nested accordions

TypeScript

• AccordionProps type exported from @ocean-network-express/magenta-ui/react is a generic, it accepts boolean type that describes multiple state:

Accessibility

Accordion follows WAI-ARIA recommendations:

Keyboard interactions

Key	Description
ArrowDown	Moves focus to next item
ArrowUp	Moves focus to previous item
Home	Moves focus to first item
End	Moves focus to last item
Space/Enter	Toggles focused item opened state