Accordion
ARIA
RTL
An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
Based on Radix UI.
Anatomy
<Accordion>
<Accordion.Item>
<Accordion.Header>
<Accordion.Button>...</Accordion.Button>
</Accordion.Header>
<Accordion.Content>...</Accordion.Content>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>
<Accordion.Button>...</Accordion.Button>
</Accordion.Header>
<Accordion.ContentOutside>...</Accordion.ContentOutside>
</Accordion.Item>
</Accordion>Default
Open by default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
One item open at a time
Disabled
Content outside
Header content
With divider
Sizes
Sizes: content outside
Custom background
Open/Close all items programmatically
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| itemSize | sm | md | lg | xl | No | md | Size of accordeon item |
| singleOpen | boolean | No | false | Whether only one item can be opened at a time |
| defaultValue | string | No | - | The value of the item to expand |
| value | string[] | No | - | The accordeon items value |
| onValueChange | (value: string[]) => void | No | - | Event handler called when the expanded state of an item changes and prop singleOpen in false state |
Accordion.Item
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| value | string | Yes | - | The accordeon item value |
| disabled | boolean | No | false | Set disabled/non-disabled |