> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.
# Accordion
A vertically stacked set of interactive headings that each reveal an associated section of content.
## Features
- Full keyboard navigation.
- Supports horizontal/vertical orientation.
- Supports Right to Left direction.
- Can expand one or multiple items.
- Can be controlled or uncontrolled.
## Anatomy
Import all parts and piece them together.
```jsx
import { Accordion } from "@radix-solid/primitives";
export default () =>
;
```
## API Reference
### Root
Contains all the parts of an accordion.
| Prop | Type | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------ |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `type*`Determines whether one or multiple items can be opened at the same time. | `enum` | — |
| `value`The controlled value of the item to expand when `type` is `"single"`. Must be used in conjunction with `onValueChange`. | `string` | — |
| `defaultValue`The value of the item to expand when initially rendered and `type` is `"single"`. Use when you do not need to control the state of the items. | `string` | — |
| `onValueChange`Event handler called when the expanded state of an item changes and `type` is `"single"`. | `function` | — |
| `value`The controlled value of the item to expand when `type` is `"multiple"`. Must be used in conjunction with `onValueChange`. | `string[]` | `[]` |
| `defaultValue`The value of the item to expand when initially rendered when `type` is `"multiple"`. Use when you do not need to control the state of the items. | `string[]` | `[]` |
| `onValueChange`Event handler called when the expanded state of an item changes and `type` is `"multiple"`. | `function` | — |
| `collapsible`When `type` is `"single"`, allows closing content when clicking trigger for an open item. | `boolean` | `false` |
| `disabled`When `true`, prevents the user from interacting with the accordion and all its items. | `boolean` | `false` |
| `dir`The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode. | `enum` | `"ltr"` |
| `orientation`The orientation of the accordion. | `enum` | `"vertical"` |
| Data attribute | Values |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |
### Item
Contains all the parts of a collapsible section.
| Prop | Type | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `disabled`When `true`, prevents the user from interacting with the item. | `boolean` | `false` |
| `value*`A unique value for the item. | `string` | — |
| Data attribute | Values |
| -------------------- | ---------------------------- |
| `[data-state]` | `"open" \| "closed"` |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | `"vertical" \| "horizontal"` |
### Header
Wraps an `Accordion.Trigger`. Use the `asChild` prop to update it to the appropriate heading level for your page.
| Prop | Type | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| Data attribute | Values |
| -------------------- | ---------------------------- |
| `[data-state]` | `"open" \| "closed"` |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | `"vertical" \| "horizontal"` |
### Trigger
Toggles the collapsed state of its associated item. It should be nested inside of an `Accordion.Header`.
| Prop | Type | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| Data attribute | Values |
| -------------------- | ---------------------------- |
| `[data-state]` | `"open" \| "closed"` |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | `"vertical" \| "horizontal"` |
### Content
Contains the collapsible content for an item.
| Prop | Type | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `forceMount`Used to force mounting when more control is needed. Useful when controlling animation with Solid-compatible animation libraries. | `boolean` | — |
| Data attribute | Values |
| -------------------- | ---------------------------- |
| `[data-state]` | `"open" \| "closed"` |
| `[data-disabled]` | Present when disabled |
| `[data-orientation]` | `"vertical" \| "horizontal"` |
| CSS Variable | Description |
| ---------------------------------- | ---------------------------------------------- |
| `--radix-accordion-content-width` | The width of the content when it opens/closes |
| `--radix-accordion-content-height` | The height of the content when it opens/closes |
## Examples
### Expanded by default
Use the `defaultValue` prop to define the open item by default.
```jsx
…
…
```
### Allow collapsing all items
Use the `collapsible` prop to allow all items to close.
```jsx
…
…
```
### Multiple items open at the same time
Set the `type` prop to `multiple` to enable opening multiple items at once.
```jsx
…
…
```
### Rotated icon when open
You can add extra decorative elements, such as chevrons, and rotate it when the item is open.
```jsx
// index.tsx
import { Accordion } from "@radix-solid/primitives";
import { ChevronDownIcon } from "@radix-solid/icons";
import "./styles.css";
export default () =>
Trigger text
…
;
```
```css
/* styles.css */
.AccordionChevron {
transition: transform 300ms;
}
.AccordionTrigger[data-state="open"] > .AccordionChevron {
transform: rotate(180deg);
}
```
### Horizontal orientation
Use the `orientation` prop to create a horizontal accordion.
```jsx
…
…
```
### Animating content size
Use the `--radix-accordion-content-width` and/or `--radix-accordion-content-height` CSS variables to animate the size of the content when it opens/closes:
```jsx
// index.tsx
import { Accordion } from "@radix-solid/primitives";
import "./styles.css";
export default () =>
…
…
;
```
```css
/* styles.css */
.AccordionContent {
overflow: hidden;
}
.AccordionContent[data-state="open"] {
animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
animation: slideUp 300ms ease-out;
}
@keyframes slideDown {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes slideUp {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
```
## Accessibility
Adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion).
### Keyboard Interactions
| Key | Description |
| ------------- | -------------------------------------------------------------------------------------- |
| `Space` | When focus is on an `Accordion.Trigger` of a collapsed section, expands the section. |
| `Enter` | When focus is on an `Accordion.Trigger` of a collapsed section, expands the section. |
| `Tab` | Moves focus to the next focusable element. |
| `Shift + Tab` | Moves focus to the previous focusable element. |
| `ArrowDown` | Moves focus to the next `Accordion.Trigger` when `orientation` is `vertical`. |
| `ArrowUp` | Moves focus to the previous `Accordion.Trigger` when `orientation` is `vertical`. |
| `ArrowRight` | Moves focus to the next `Accordion.Trigger` when `orientation` is `horizontal`. |
| `ArrowLeft` | Moves focus to the previous `Accordion.Trigger` when `orientation` is `horizontal`. |
| `Home` | When focus is on an `Accordion.Trigger`, moves focus to the first `Accordion.Trigger`. |
| `End` | When focus is on an `Accordion.Trigger`, moves focus to the last `Accordion.Trigger`. |