Table of Contents#
- Default Accordion
- Multiple Open
- Custom Icon
- Accordion Props
- Accordion Item Props
- Accordion Header Props
- Accordion Content Props
Default Accordion#
Multiple Open#
Custom Icon#
Accordion Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the accordion, typically AccordionItem components |
| iconEnabled | boolean | true | Whether to show toggle icons |
| iconPosition | 'left' 'right' | 'right' | Position of the toggle icon |
| iconClassName | string | '' | Additional CSS class for the icon |
| activeIconClassName | string | '' | Additional CSS class for the active state icon |
| activeItem | string[] | - | Array of active item IDs (controlled mode) |
| activeIcon | ReactNode | - | Custom icon to show when item is expanded |
| inactiveIcon | ReactNode | - | Custom icon to show when item is collapsed |
| multiple | boolean | false | Whether multiple items can be expanded simultaneously |
| className | string | '' | Additional CSS class for the accordion container |
| labelClassName | string | '' | Additional CSS class for item labels |
| activeLabelClassName | string | '' | Additional CSS class for active item labels |
| headerClassName | string | '' | Additional CSS class for item headers |
| activeHeaderClassName | string | '' | Additional CSS class for active item headers |
| contentClassName | string | '' | Additional CSS class for item content areas |
| reset | boolean | false | Whether to reset/close all items when this prop changes |
| ...rest | HTMLAttributes | - | Any other props will be spread to the root element |
Accordion Item Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content inside the accordion item (usually header and content). |
| id | string | - | Unique identifier for the accordion item. |
| disabled | boolean | false | If true, the item cannot be toggled. |
| className | string | '' | Additional CSS classes for the accordion item. |
Accordion Header Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the header, typically a label or title. |
| isOpen | boolean | false | Controls whether the accordion item is open. |
| onToggle | () => void | - | Callback function triggered when the header is clicked. |
| iconEnabled | boolean | true | Whether to show toggle icons. |
| iconPosition | 'left' 'right' | 'right' | Position of the toggle icon. |
| iconClassName | string | '' | Additional CSS class for the icon. |
| activeIconClassName | string | '' | Additional CSS class for the active state icon. |
| activeIcon | ReactNode | - | Custom icon to display when the item is expanded. |
| inactiveIcon | ReactNode | - | Custom icon to display when the item is collapsed. |
| disabled | boolean | false | Disables the toggle functionality if set to true. |
| className | string | '' | Additional class for the outer wrapper. |
| labelClassName | string | '' | Additional class for the label. |
| activeLabelClassName | string | '' | Additional class when label is active. |
| headerClassName | string | '' | Additional class for the header container. |
| activeHeaderClassName | string | '' | Additional class for active header. |
| reset | boolean | false | Whether to reset when the parent Accordion resets. |
| tagName | 'h1' 'h2' 'h3' 'h4' 'h5' 'h6' 'p' 'div' 'button' | 'h2' | HTML tag to use for the header element. |
Accordion Content Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content to display inside the accordion when expanded. |
| isOpen | boolean | false | Controls whether the content is shown. |
| className | string | '' | Additional CSS classes for the content wrapper. |
| reset | boolean | false | If true, resets internal state when the prop changes. |