# Accordion
The Accordion component is used to show or hide information based on the collapse and expand state of its child elements. It has two variants with configurations provided in the Configuration section.
## Example
Import the required components `Accordion` and `AccordionItem` to use it in your project.
```html
```
You can create an accordion in two ways, using props and using Svelte 5 snippet. The example are showing below:
### Title Using prop
You can create an accordion item with a title and content props using the following example.
```html
Cognitive dissonance refers to the ...
```
### Title Using Snippet
If you have custom content/elements in the title or content, you ca use **Svelte 5**'s `snippet` showing the following example:
```html
{#snippet title()}
Human Psychology Fact
{/snippet}
Cognitive dissonance refers to the ...
```
## Group Accordion
To create a group of accordion items, wrap multiple `AccordionItem` components within an `Accordion` component:
```html
...
...
```
## Flush Accordion
The flush variant drops the outer border and the rounding, leaving only the dividers between the items. Set the `flush` attribute on the `Accordion` and every `AccordionItem` inside it picks it up.
```html
...
```
## Sizes
The `Accordion` and `AccordionItem` component provides a `size` prop to control the size of the accordion items. The `size` prop can take one of the following values: `'compact'`, `'default'`, or `'large'`.
Set `size` on the `Accordion` and every `AccordionItem` inside it inherits the value, so you do not have to set it on each one.
```html
...
```
In the example above every `AccordionItem` uses the `compact` size, because the value is set once on the `Accordion`.
You can also set the `size` prop individually on each `AccordionItem` component which will override the size specified on the `Accordion`.
```html
...
...
```
## Accordion Open State
To have an `AccordionItem` open by default, add the `open` attribute to the `AccordionItem` you want to keep open. This is a dynamic attribute, not a prop, and will take effect when added to the component.
```html
...
...
```
## Standalone Mode
The `Accordion` component comes with a `standalone` prop that controls how accordion items behave when they are opened or closed. This prop determines whether multiple items can remain open simultaneously or if only one item can stay open at a time.
- **Default Behavior (standalone: true)**: Only one accordion can remain open at a time within the group. Opening a new item will automatically close the currently open one.
- **Multiple Open (standalone: false)**: Allows multiple accordion items in the group to remain open simultaneously.
```html
...
...
```
## Rounded Corner
The `rounded` prop controls the border radius of the accordion items. Available values are `"none"`, `"sm"`, `"md"` (default), `"lg"`, `"xl"`, `"2xl"` and `"full"`. When set on the `Accordion`, all `AccordionItem`s inherit it, and in a group only the outer corners of the first and last items are rounded. You can also set it on an individual `AccordionItem`. The `rounded` prop has no effect on a flush accordion.
```html
...
...
```
## Animation Speed
The `animationSpeed` prop controls how fast the accordion opens and closes. Available values are `"none"`, `"slower"`, `"slow"`, `"normal"`, `"fast"` (default), and `"faster"`.
```html
...
...
...
...
...
...
```
## Customization
Several props take classes for the different parts of the accordion, so the header, the body and the wrapper can be restyled separately.
### Available Props for Customization
- `containerClasses`: Apply custom classes to the accordion's main container.
- `openContainerClasses`: Set custom classes for the container when the accordion is active (expanded).
- `contentClasses`: Define custom classes for the content section.
- `titleClasses`: Customize the classes for the title of each accordion item.
- `openTitleClasses`: Apply specific classes to the title when the accordion is active (expanded).
```html
```
Anything else you pass reaches the element itself, so an `id`, a `title`, a `data-*` attribute or an event handler all work the way they would on a ``. The same is true of an `AccordionItem`.
## Accessibility
The Accordion ships with the ARIA wiring and the keyboard support it needs. Here is what is handled:
- **Keyboard Navigation** Use tab to navigate between headers.
- Use Space or Enter to toggle the expanded/collapsed state of an accordion item.
- **ARIA Attributes** The `aria-expanded` attribute will be managed by the component itself for a properly accessible accordion.
- The `aria-controls` links the header to its associated content.
- Each header and content has a unique `id` for ARIA attributes.
- Hidden content uses `aria-hidden="true"` when collapsed and `aria-hidden="false"` when expanded.
- **Focus Management** The focus is retained on the header when toggling the accordion.
- `tabindex="0"` ensures all headers are keyboard-navigable.
- **Screen Reader Compatibility** Descriptive labels or headings can be added for better understanding.
- Semantic roles and ARIA attributes provide full support for assistive technologies.
## Configuration
---
Category: Components
Keywords: accordion, collapsible, toggle, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt