Accordion
Expandable content panels for showing and hiding information.
Basic
Simple accordion component
Accordion Title
Custom Header
Customize the header with the action prop
Accordion Title
Accordion Group
Manage multiple accordions
First
Second
Third
Accordion Props
| Name | Type | Default | Description |
|---|---|---|---|
title | ReactNode | - | Title displayed when no action prop is provided |
open | boolean | - | Control open state |
setOpen | (open: boolean) => void | - | Callback to change open state |
defaultOpen | boolean | false | Initial open state for uncontrolled mode |
action | ReactNode | (props: { open?: boolean; setOpen?: (open: boolean) => void }) => ReactNode | - | Custom header content |
classNameHeader | string | '' | CSS class for the header element |
classNameContent | string | '' | CSS class for the content wrapper |
className | string | '' | Additional CSS classes |
children | ReactNode | - | Content inside the accordion |
AccordionGroup Props
| Name | Type | Default | Description |
|---|---|---|---|
openIndex | number | - | Index of the open accordion item |
setOpenIndex | (index: number) => void | - | Callback to change open item index |
defaultOpenIndex | number | - | Initial open index for uncontrolled mode |
className | string | '' | Additional CSS classes |
children | ReactNode | - | Accordion elements inside the group |