Accordion
A collapsible component for displaying content in a vertical stack.
Usage
React is a JavaScript library focused on building user interfaces.
Solid is a JavaScript library focused on building user interfaces.
Vue is a JavaScript library focused on building user interfaces.
import { ChevronDownIcon } from 'lucide-react'
import { Accordion } from '@ark-ui/react'
export const Basic = () => (
<Accordion.Root>
{['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 { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import { Accordion } from '@ark-ui/solid'
export const Basic = () => {
return (
<Accordion.Root value={['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 { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'
import { ChevronDownIcon } from 'lucide-vue-next'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root>
<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>
Anatomy
Understanding the Accordion’s anatomy is crucial for proper setup:
Each component part is marked with a
data-partattribute for easy DOM identification.
Animation
You can use CSS animations to create smooth transitions for opening and closing Accordion items. Utilize the data-state attribute in combination with the --height CSS variable to animate the open and closed states of Accordion.ItemContent.
@keyframes slideDown {
from { height: 0; }
to { height: var(--height); }
}
@keyframes slideUp {
from { height: var(--height); }
to { height: 0; }
}
[data-scope='accordion'][data-part='item-content'][data-state='open'] {
animation: slideDown 250ms;
}
[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
animation: slideUp 200ms;
}Examples
Collapsible Panels
To create a collapsible Accordion where all panels can be closed simultaneously,
utilize the collapsible prop:
React is a JavaScript library for building user interfaces.
Solid is a JavaScript library for building user interfaces.
Vue is a JavaScript library for building user interfaces.
import { ChevronDownIcon } from 'lucide-react'
import { Accordion } from '@ark-ui/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 { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import { Accordion } from '@ark-ui/solid'
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 { ref } from 'vue'
import { Accordion } from '@ark-ui/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 Open
For an Accordion that allows keeping multiple panels open, apply the multiple
prop:
React is a JavaScript library for building user interfaces.
Solid is a JavaScript library for building user interfaces.
Vue is a JavaScript library for building user interfaces.
import { ChevronDownIcon } from 'lucide-react'
import { Accordion } from '@ark-ui/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 { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import { Accordion } from '@ark-ui/solid'
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 { ref } from 'vue'
import { Accordion } from '@ark-ui/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>
Accessing the Accordion API
For advanced control, access the Accordion API using a function as a child component:
import { Accordion } from '@ark-ui/react'
export const RenderProp = () => {
const items = ['panel-1', 'panel-2', 'panel-3']
return (
<Accordion.Root>
{items.map((item) => (
<Accordion.Item key={item} value={item}>
<Accordion.ItemContext>
{(accordionItem) => (
<>
<Accordion.ItemTrigger>
{accordionItem.expanded ? 'Expanded' : 'Closed'}
</Accordion.ItemTrigger>
<Accordion.ItemContent>{item} content</Accordion.ItemContent>
</>
)}
</Accordion.ItemContext>
</Accordion.Item>
))}
</Accordion.Root>
)
}
import { Index } from 'solid-js'
import { Accordion } from '@ark-ui/solid'
export const RenderProp = () => {
const items = ['panel-1', 'panel-2', 'panel-3']
return (
<Accordion.Root>
<Index each={items}>
{(item) => (
<Accordion.Item value={item()}>
<Accordion.ItemContext>
{(api) => (
<>
<Accordion.ItemTrigger>
{api().expanded ? 'Expanded' : 'Closed'}
</Accordion.ItemTrigger>
<Accordion.ItemContent>{item()} content</Accordion.ItemContent>
</>
)}
</Accordion.ItemContext>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root>
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemContext v-slot="{ expanded }">
<Accordion.ItemTrigger>{{ expanded ? 'Expanded' : 'Closed' }}</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} content</Accordion.ItemContent>
</Accordion.ItemContext>
</Accordion.Item>
</Accordion.Root>
</template>
Controlled Accordion
To manage the Accordion’s state, use the value prop and update it with the
onValueChange event:
import { useState } from 'react'
import { Accordion } from '@ark-ui/react'
export const Controlled = () => {
const items = ['panel-1', 'panel-2', 'panel-3']
const [value, setValue] = useState<string[]>([])
return (
<Accordion.Root value={value} onValueChange={(details) => setValue(details.value)}>
{items.map((item) => (
<Accordion.Item key={item} value={item}>
<Accordion.ItemTrigger>{item} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{item} content</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
import { Index, createSignal } from 'solid-js'
import { Accordion } from '@ark-ui/solid'
export const Controlled = () => {
const [value, setValue] = createSignal<string[]>([])
const items = ['panel-1', 'panel-2', 'panel-3']
return (
<Accordion.Root value={value()} onValueChange={(details) => setValue(details.value)}>
<Index each={items}>
{(item) => (
<Accordion.Item value={item()}>
<Accordion.ItemTrigger>{item()} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{item()} content</Accordion.ItemContent>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'
const items = ref(['React', 'Solid', 'Vue'])
const value = ref(['React'])
</script>
<template>
<Accordion.Root v-model="value">
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>{{ item }} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} content</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
Changing Orientation
Set the Accordion’s orientation to vertical with the orientation prop:
import { Accordion } from '@ark-ui/react'
export const Vertical = () => {
const items = ['panel-1', 'panel-2', 'panel-3']
return (
<Accordion.Root orientation="vertical">
{items.map((item) => (
<Accordion.Item key={item} value={item} disabled={item === 'panel-2'}>
<Accordion.ItemTrigger>{item} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{item} content</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
import { Index } from 'solid-js'
import { Accordion } from '@ark-ui/solid'
export const Vertical = () => {
const items = ['panel-1', 'panel-2', 'panel-3']
return (
<Accordion.Root orientation="vertical">
<Index each={items}>
{(item) => (
<Accordion.Item value={item()}>
<Accordion.ItemTrigger>{item()} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{item()} content</Accordion.ItemContent>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root orientation="vertical">
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>{{ item }} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} content</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
Disabling an Accordion Item
Disable any Accordion Item using the disabled prop:
import { Accordion } from '@ark-ui/react'
export const Disabled = () => {
const items = ['panel-1', 'panel-2', 'panel-3']
return (
<Accordion.Root>
{items.map((item) => (
<Accordion.Item key={item} value={item} disabled={item === 'panel-2'}>
<Accordion.ItemTrigger>{item} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{item} content</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
import { Index } from 'solid-js'
import { Accordion } from '@ark-ui/solid'
export const Disabled = () => {
const items = ['panel-1', 'panel-2', 'panel-3']
return (
<Accordion.Root>
<Index each={items}>
{(item) => (
<Accordion.Item value={item()} disabled={item() === 'panel-2'}>
<Accordion.ItemTrigger>{item()} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{item()} content</Accordion.ItemContent>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@ark-ui/vue'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root>
<Accordion.Item v-for="item in items" :key="item" :value="item" :disabled="item === 'Solid'">
<Accordion.ItemTrigger>{{ item }} trigger</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} content</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
API Reference
Explore our detailed API Reference for further customization:
Root
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
collapsibleWhether an accordion item can be collapsed after it has been opened. | boolean | false |
defaultValueThe initial value of the accordion when it is first rendered.
Use when you do not need to control the state of the color picker. | string[] | |
disabledWhether the accordion items are disabled | boolean | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the accordion. Useful for composition. | Partial<{
root: string
item(value: string): string
content(value: string): string
trigger(value: string): string
}> | |
lazyMountWhether to enable lazy mounting | boolean | false |
multipleWhether multple accordion items can be open at the same time. | boolean | false |
onFocusChangeThe callback fired when the focused accordion item changes. | (details: FocusChangeDetails) => void | |
onValueChangeThe callback fired when the state of opened/closed accordion items changes. | (details: ValueChangeDetails) => void | |
orientationThe orientation of the accordion items. | 'horizontal' | 'vertical' | |
unmountOnExitWhether to unmount on exit. | boolean | false |
valueThe `id` of the accordion item that is currently being opened. | string[] |
ItemContent
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
ItemIndicator
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Item
| Prop | Type | Default |
|---|---|---|
valueThe value of the accordion item. | string | |
asChildRender as a different element type. | boolean | |
defaultOpenThe initial open state of the collapsible when it is first rendered.
Use when you do not need to control its open state. | boolean | |
disabledWhether the collapsible is disabled | boolean | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the collapsible. Useful for composition. | Partial<{ root: string; content: string; trigger: string }> | |
lazyMountWhether to enable lazy mounting | boolean | false |
onExitCompleteFunction called when the animation ends in the closed state. | () => void | |
onOpenChangeFunction called when the popup is opened | (details: OpenChangeDetails) => void | |
openWhether the collapsible is open | boolean | |
unmountOnExitWhether to unmount on exit. | boolean | false |
ItemTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |