Accordion
A collapsible component for displaying content in a vertical stack.
Features
- Full keyboard navigation
- Supports horizontal and vertical orientation
- Right-to-Left (RTL) support
- Single or multiple item expansion
- Controlled and uncontrolled modes
- Collapse each accordion item
Anatomy
To set up the accordion correctly, it's essential to understand its anatomy and the naming of its parts.
Each part includes a
data-part
attribute to help identify them in the DOM.
Examples
Default Expanded State
Set the defaultValue
prop to specify which item should be expanded by default.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const Basic = () => {
return (
<Accordion.Root defaultValue={['React']}>
{['React', 'Solid', 'Vue'].map((item) => (
<Accordion.Item key={item} value={item}>
<Accordion.ItemTrigger>
What is {item}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
export const Basic = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Index each={['React', 'Solid', 'Vue']}>
{(item) => (
<Accordion.Item value={item()}>
<Accordion.ItemTrigger>
What is {item()}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item()} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<script setup lang="ts">
import { Accordion } from '@ark-ui/vue/accordion'
import { ref } from 'vue'
import { ChevronDownIcon } from 'lucide-vue-next'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root :defaultValue="['React']">
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{{ item }} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
Collapsible
Use the collapsible
prop to allow the user to collapse all panels.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const Collapsible = () => {
return (
<Accordion.Root defaultValue={['React']} collapsible>
{['React', 'Solid', 'Vue'].map((item) => (
<Accordion.Item key={item} value={item}>
<Accordion.ItemTrigger>
{item}
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
export const Collapsible = () => {
return (
<Accordion.Root value={['React']} collapsible>
<Index each={['React', 'Solid', 'Vue']}>
{(item) => (
<Accordion.Item value={item()}>
<Accordion.ItemTrigger>
What is {item()}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item()} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<script setup lang="ts">
import { Accordion } from '@ark-ui/vue/accordion'
import { ref } from 'vue'
import { ChevronDownIcon } from 'lucide-vue-next'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root collapsible>
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator><ChevronDownIcon /></Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{{ item }} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
Multiple Panels
Use the multiple
prop to allow multiple panels to be expanded simultaneously.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const Multiple = () => {
return (
<Accordion.Root defaultValue={['React']} multiple>
{['React', 'Solid', 'Vue'].map((item) => (
<Accordion.Item key={item} value={item}>
<Accordion.ItemTrigger>
{item}
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
export const Multiple = () => {
return (
<Accordion.Root value={['React']} multiple>
<Index each={['React', 'Solid', 'Vue']}>
{(item) => (
<Accordion.Item value={item()}>
<Accordion.ItemTrigger>
What is {item()}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item()} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<script setup lang="ts">
import { Accordion } from '@ark-ui/vue/accordion'
import { ref } from 'vue'
import { ChevronDownIcon } from 'lucide-vue-next'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root multiple>
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator><ChevronDownIcon /></Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{{ item }} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
Horizontal Orientation
By default, the Accordion is oriented vertically. Use the orientation
prop to switch to a horizontal layout.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const Horizontal = () => {
return (
<Accordion.Root defaultValue={['React']} orientation="horizontal">
{['React', 'Solid', 'Vue'].map((item) => (
<Accordion.Item key={item} value={item}>
<Accordion.ItemTrigger>
What is {item}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
import { Accordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
export const Horizontal = () => {
return (
<Accordion.Root defaultValue={['React']} orientation="horizontal">
<Index each={['React', 'Solid', 'Vue']}>
{(item) => (
<Accordion.Item value={item()}>
<Accordion.ItemTrigger>
What is {item()}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item()} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<script setup lang="ts">
import { Accordion } from '@ark-ui/vue/accordion'
import { ref } from 'vue'
import { ChevronDownIcon } from 'lucide-vue-next'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root :defaultValue="['React']" orientation="horizontal">
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{{ item }} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
Animate Content Size
Use the --height
and/or --width
CSS variables to animate the size of the content when it expands or closes:
@keyframes slideDown {
from {
opacity: 0.01;
height: 0;
}
to {
opacity: 1;
height: var(--height);
}
}
@keyframes slideUp {
from {
opacity: 1;
height: var(--height);
}
to {
opacity: 0.01;
height: 0;
}
}
[data-scope="accordion"][data-part="item-content"][data-state="open"] {
animation: slideDown 250ms ease-in-out;
}
[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
animation: slideUp 200ms ease-in-out;
}
API Reference
Root
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
collapsible | false | boolean Whether an accordion item can be closed after it has been expanded. |
defaultValue | string[] The initial value of the accordion when it is first rendered. Use when you do not need to control the state of the color picker. | |
disabled | boolean Whether the accordion items are disabled | |
ids | Partial<{
root: string
item(value: string): string
itemContent(value: string): string
itemTrigger(value: string): string
}> The ids of the elements in the accordion. Useful for composition. | |
lazyMount | false | boolean Whether to enable lazy mounting |
multiple | false | boolean Whether multple accordion items can be expanded at the same time. |
onFocusChange | (details: FocusChangeDetails) => void The callback fired when the focused accordion item changes. | |
onValueChange | (details: ValueChangeDetails) => void The callback fired when the state of expanded/collapsed accordion items changes. | |
orientation | 'vertical' | 'horizontal' | 'vertical' The orientation of the accordion items. |
unmountOnExit | false | boolean Whether to unmount on exit. |
value | string[] The `value` of the accordion items that are currently being expanded. |
Data Attribute | Value |
---|---|
[data-scope] | accordion |
[data-part] | root |
[data-orientation] | The orientation of the accordion |
ItemContent
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | accordion |
[data-part] | item-content |
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
[data-focus] | Present when focused |
[data-orientation] | The orientation of the item |
ItemIndicator
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | accordion |
[data-part] | item-indicator |
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled |
[data-focus] | Present when focused |
[data-orientation] | The orientation of the item |
Item
Prop | Default | Type |
---|---|---|
value | string The value of the accordion item. | |
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
disabled | boolean Whether the accordion item is disabled. |
Data Attribute | Value |
---|---|
[data-scope] | accordion |
[data-part] | item |
[data-state] | "open" | "closed" |
[data-focus] | Present when focused |
[data-disabled] | Present when disabled |
[data-orientation] | The orientation of the item |
ItemTrigger
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'button'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | accordion |
[data-part] | item-trigger |
[data-orientation] | The orientation of the item |
[data-state] | "open" | "closed" |
RootProvider
Prop | Default | Type |
---|---|---|
value | UseAccordionReturn | |
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
lazyMount | false | boolean Whether to enable lazy mounting |
unmountOnExit | false | boolean Whether to unmount on exit. |
Accessibility
This component complies with the Accordion WAI-ARIA design pattern.
Keyboard Support
Key | Description |
---|---|
Space | When focus is on an trigger of a collapsed item, the item is expanded |
Enter | When focus is on an 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 trigger |
ArrowUp | Moves focus to the previous trigger. |
Home | When focus is on an trigger, moves focus to the first trigger. |
End | When focus is on an trigger, moves focus to the last trigger. |