Accordion
Reveal and collapse related content using native details and summary semantics.
Overview
The accordion component is useful for FAQs and dense content where users need to expand one section at a time.
Example
Shipping policy
Orders are processed within two business days and include tracking information.
Returns policy
Returns are accepted within 30 days of delivery for unused products.
Support hours
Live support is available Monday to Friday, 9am to 5pm Eastern Time.
API reference
AccordionProps
childrenReactNode—
Name: children
Description: AccordionItem children to render in the container.
Type: ReactNode
Default: —
allowMultiplebooleanfalse
Name: allowMultiple
Description: Allows multiple accordion items to stay expanded.
Type: boolean
Default: false
classNamestring''
Name: className
Description: Additional class name for the accordion wrapper.
Type: string
Default: ''
AccordionItemProps
idstring—
Name: id
Description: Unique ID used for details element identification.
Type: string
Default: —
titlestring—
Name: title
Description: Summary text shown as the item trigger.
Type: string
Default: —
childrenReactNode—
Name: children
Description: Panel content displayed when expanded.
Type: ReactNode
Default: —
defaultOpenbooleanfalse
Name: defaultOpen
Description: Controls whether item is initially expanded.
Type: boolean
Default: false
Accessibility
- WCAG 2.1.1 Keyboard: Disclosure triggers are keyboard operable.
- WCAG 2.4.7 Focus Visible: Summary element receives visible focus treatment.
- WCAG 4.1.2 Name, Role, Value: Native details and summary semantics are preserved.