Accordion
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Single Accordion
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Multiple Accordion
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Accordion with left icon
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Nested Accordion
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Controlled Accordion
Preview
index.tsxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Design Tokens for Accordion
| Token | Color for | State/Meaning |
|---|---|---|
| --par-color-text-accordion-item-enabled | Accordion item text | Enabled (default) |
| --par-color-text-accordion-item-hovered | Accordion item text | Hovered |
| --par-color-text-accordion-item-pressed | Accordion item text | Pressed |
| --par-color-text-accordion-item-expanded | Accordion item text | Expanded |
| --par-color-text-accordion-item-disabled | Accordion item text | Disabled |
| --par-color-bg-accordion-menu | Accordion container bg | Container background (contained kind) |
| --par-color-bg-accordion-item-enabled | Accordion item bg | Enabled (default) |
| --par-color-bg-accordion-item-hovered | Accordion item bg | Hovered |
| --par-color-bg-accordion-item-pressed | Accordion item bg | Pressed |
| --par-color-bg-accordion-item-expanded | Accordion item bg | Expanded |
| --par-color-bg-accordion-item-disabled | Accordion item bg | Disabled |
| --par-color-bg | Accordion bg (flush kind) | General background (flush kind) |
| --par-color-border-surface | Accordion border | Border of accordion container and items |
Accordion API Reference
<Accordion />
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'single' | 'multiple' | 'single' | Accordion selection mode: only one or multiple items can be open |
| kind | 'contained' | 'flush' | 'contained' | Visual style: with border/background (contained) or borderless (flush) |
| icon | 'chevron' | 'cross' | 'chevron' | Icon style for expand/collapse indicator |
| iconSide | 'left' | 'right' | 'right' | Position of indicator icon in trigger |
| defaultValue | string | string[] | Uncontrolled: default open item(s) | |
| value | string | string[] | Controlled: open item(s) value | |
| onChange | (value) => void | Callback when open item(s) change | |
| items | Array{title, content, ...} | List of items (see below), alternative to using children | |
| ...BaseProps | See below | All layout/spacing props from Base (margin, padding, etc.) | |
| ...divProps | HTMLDivElement props | All native div props (className, style, etc.) |
items structure
| Field | Type | Description |
|---|---|---|
| title | React.ReactNode | Title for the item (trigger) |
| content | React.ReactNode | Content shown when expanded |
| value | string | Unique value for the item |
| itemProps | object | Extra props for AccordionItem (optional) |
<AccordionItem />
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Unique value for the item | |
| disabled | boolean | false | Disable this item |
| ...divProps | HTMLDivElement props | All native div props (className, style, etc.) |
<AccordionItemTrigger />
| Prop | Type | Default | Description |
|---|---|---|---|
| isExpanded | boolean | Whether the item is expanded (injected automatically) | |
| disabled | boolean | Disable the trigger | |
| handleChange | () => void | Callback for click (injected automatically) | |
| icon | 'chevron' | 'cross' | 'chevron' | Icon style for expand/collapse indicator |
| iconSide | 'left' | 'right' | 'right' | Position of indicator icon in trigger |
| ...buttonProps | HTMLButtonElement props | All native button props (className, style, etc.) |
<AccordionItemContent />
| Prop | Type | Default | Description |
|---|---|---|---|
| isExpanded | boolean | Whether the item is expanded (injected automatically) | |
| ...divProps | HTMLDivElement props | All native div props (className, style, etc.) |
Note: Accordion extends all layout/spacing props from the Base component. See BaseProps for full list.