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', 'Svelte'].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', 'Svelte']}>
{(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 { ChevronRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'
const items = ref(['React', 'Solid', 'Vue', 'Svelte'])
</script>
<template>
<Accordion.Root :defaultValue="['React']">
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator>
<ChevronRightIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
<script>
import { Accordion } from '@ark-ui/svelte/accordion'
import { ChevronDownIcon } from 'lucide-svelte'
const items = ['React', 'Solid', 'Vue', 'Svelte']
</script>
<Accordion.Root defaultValue={['React']}>
{#each items as item (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>
{/each}
</Accordion.Root>
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', 'Svelte'].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 defaultValue={['React']} collapsible>
<Index each={['React', 'Solid', 'Vue', 'Svelte']}>
{(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 { ChevronRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'
const items = ref(['React', 'Solid', 'Vue', 'Svelte'])
</script>
<template>
<Accordion.Root collapsible>
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator><ChevronRightIcon /></Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
<script>
import { Accordion } from '@ark-ui/svelte/accordion'
import { ChevronDownIcon } from 'lucide-svelte'
</script>
<Accordion.Root defaultValue={['React']} collapsible>
{#each ['React', 'Solid', 'Vue', 'Svelte'] as item (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>
{/each}
</Accordion.Root>
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', 'Svelte'].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 defaultValue={['React']} multiple>
<Index each={['React', 'Solid', 'Vue', 'Svelte']}>
{(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 { ChevronRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'
const items = ref(['React', 'Solid', 'Vue', 'Svelte'])
</script>
<template>
<Accordion.Root multiple>
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator><ChevronRightIcon /></Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
<script>
import { Accordion } from '@ark-ui/svelte/accordion'
import { ChevronDownIcon } from 'lucide-svelte'
</script>
<Accordion.Root defaultValue={['React']} multiple>
{#each ['React', 'Solid', 'Vue', 'Svelte'] as item (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>
{/each}
</Accordion.Root>
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', 'Svelte'].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', 'Svelte']}>
{(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 { ChevronRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'
const items = ref(['React', 'Solid', 'Vue', 'Svelte'])
</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>
<ChevronRightIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
<script>
import { Accordion } from '@ark-ui/svelte/accordion'
import { ChevronRightIcon } from 'lucide-svelte'
</script>
<div style="display: flex; max-width: 900px;">
<Accordion.Root defaultValue={['React']} orientation="horizontal">
{#each ['React', 'Solid', 'Vue', 'Svelte'] as item (item)}
<Accordion.Item value={item} style="display: flex; flex-direction: column;">
<Accordion.ItemTrigger style="min-height: 2rem; writing-mode: vertical-lr;">
What is {item}?
<Accordion.ItemIndicator>
<ChevronRightIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent style="max-width: 200px;">
{item} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
{/each}
</Accordion.Root>
</div>
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;
}
Using the Root Provider
The RootProvider
component provides a context for the accordion. It accepts the value of the useAccordion
hook. You
can leverage it to access the component state and methods from outside the accordion.
import { Accordion, useAccordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const RootProvider = () => {
const accordion = useAccordion({
multiple: true,
defaultValue: ['React'],
})
return (
<>
<button onClick={() => accordion.setValue(['Vue'])}>Set to Vue</button>
<Accordion.RootProvider value={accordion}>
{['React', 'Solid', 'Vue', 'Svelte'].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.RootProvider>
</>
)
}
import { Accordion, useAccordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index } from 'solid-js'
export const RootProvider = () => {
const accordion = useAccordion({
multiple: true,
defaultValue: ['React'],
})
return (
<>
<button onClick={() => accordion().setValue(['Vue'])}>Set to Vue</button>
<Accordion.RootProvider value={accordion}>
<Index each={['React', 'Solid', 'Vue', 'Svelte']}>
{(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.RootProvider>
</>
)
}
<script setup lang="ts">
import { Accordion, useAccordion } from '@ark-ui/vue/accordion'
import { ChevronRightIcon } from 'lucide-vue-next'
const items = ['React', 'Solid', 'Vue', 'Svelte']
const accordion = useAccordion({
multiple: true,
defaultValue: ['React'],
})
</script>
<template>
<button @click="accordion.setValue(['Vue'])">Set to Vue</button>
<Accordion.RootProvider :value="accordion">
<Accordion.Item v-for="item in items" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator>
<ChevronRightIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
</Accordion.Item>
</Accordion.RootProvider>
</template>
<script>
import { Accordion, useAccordion } from '@ark-ui/svelte/accordion'
import { ChevronDownIcon } from 'lucide-svelte'
const id = $props.id()
const accordion = useAccordion({
id,
defaultValue: ['React'],
})
</script>
<div>
<div>Open items: {JSON.stringify(accordion().value)}</div>
<Accordion.RootProvider value={accordion}>
{#each ['React', 'Solid', 'Vue', 'Svelte'] as item (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>
{/each}
</Accordion.RootProvider>
</div>
If you're using the
RootProvider
component, you don't need to use theRoot
component.
Accessing context
Use the Accordion.Context
component or useAccordionContext
hook to access the state of an accordion. It exposes the
following properties:
focusedValue
: The value of the focused accordion item.value
: The value of the selected accordion items.setValue
: A method to set the selected accordion items.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const Context = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => (
<div>
<span>Selected items: {context.value.join(', ')}</span>
<span>Focused item: {context.focusedValue}</span>
<button onClick={() => context.setValue(['React', 'Solid'])}>Set value</button>
</div>
)}
</Accordion.Context>
{['React', 'Solid', 'Vue', 'Svelte'].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 Context = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => (
<div>
<span>Selected items: {context().value.join(', ')}</span>
<span>Focused item: {context().focusedValue}</span>
<button onClick={() => context().setValue(['React', 'Solid'])}>Set value</button>
</div>
)}
</Accordion.Context>
<Index each={['React', 'Solid', 'Vue', 'Svelte']}>
{(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>
)
}
<template>
<Accordion.Root :defaultValue="['React']">
<Accordion.Context v-slot="context">
<div>
<span>Selected items: {{ context.value.join(', ') }}</span>
<span>Focused item: {{ context.focusedValue }}</span>
<button @click="context.setValue(['React', 'Solid'])">Set value</button>
</div>
</Accordion.Context>
<Accordion.Item v-for="item in ['React', 'Solid', 'Vue', 'Svelte']" :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>
<script setup lang="ts">
import { Accordion } from '@ark-ui/vue/accordion'
import { ChevronDownIcon } from 'lucide-vue-next'
</script>
<script lang="ts">
import { Accordion } from '@ark-ui/svelte/accordion'
import { ChevronDownIcon } from 'lucide-svelte'
</script>
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{#snippet render(context)}
<div>
<span>Selected items: {context().value.join(', ')}</span>
<span>Focused item: {context().focusedValue}</span>
<button onclick={() => context().setValue(['React', 'Solid'])}>Set value</button>
</div>
{/snippet}
</Accordion.Context>
{#each ['React', 'Solid', 'Vue', 'Svelte'] as 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>
{/each}
</Accordion.Root>
Accessing the item context
Use the Accordion.ItemContext
component or useAccordionItemContext
hook to access the state of an accordion item. It
exposes the following properties:
expanded
: Whether the accordion item is expanded.focused
: Whether the accordion item is focused.disabled
: Whether the accordion item is disabled.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const ItemContext = () => {
return (
<Accordion.Root defaultValue={['React']}>
{['React', 'Solid', 'Vue', 'Svelte'].map((item) => (
<Accordion.Item key={item} value={item}>
<Accordion.ItemTrigger>
What is {item}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
<Accordion.ItemContext>
{(context) => (
<div style={{ display: 'inline-flex', gap: '0.5rem' }}>
<span>Expanded: {String(context.expanded)}</span>
<span>Focused: {String(context.focused)}</span>
<span>Disabled: {String(context.disabled)}</span>
</div>
)}
</Accordion.ItemContext>
</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 ItemContext = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Index each={['React', 'Solid', 'Vue', 'Svelte']}>
{(item) => (
<Accordion.Item value={item()}>
<Accordion.ItemTrigger>
What is {item()}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
<Accordion.ItemContext>
{(context) => (
<div style={{ display: 'inline-flex', gap: '0.5rem' }}>
<span>Expanded: {String(context().expanded)}</span>
<span>Focused: {String(context().focused)}</span>
<span>Disabled: {String(context().disabled)}</span>
</div>
)}
</Accordion.ItemContext>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item()} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
)}
</Index>
</Accordion.Root>
)
}
<template>
<Accordion.Root :defaultValue="['React']">
<Accordion.Item v-for="item in ['React', 'Solid', 'Vue', 'Svelte']" :key="item" :value="item">
<Accordion.ItemTrigger>
What is {{ item }}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
<Accordion.ItemContext v-slot="context">
<div style="display: inline-flex; gap: 0.5rem">
<span>Expanded: {{ context.expanded }}</span>
<span>Focused: {{ context.focused }}</span>
<span>Disabled: {{ context.disabled }}</span>
</div>
</Accordion.ItemContext>
</Accordion.ItemTrigger>
<Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
</Accordion.Item>
</Accordion.Root>
</template>
<script setup lang="ts">
import { Accordion } from '@ark-ui/vue/accordion'
import { ChevronDownIcon } from 'lucide-vue-next'
</script>
<script lang="ts">
import { Accordion } from '@ark-ui/svelte/accordion'
import { ChevronDownIcon } from 'lucide-svelte'
</script>
<Accordion.Root defaultValue={['React']}>
{#each ['React', 'Solid', 'Vue', 'Svelte'] as item}
<Accordion.Item value={item}>
<Accordion.ItemTrigger>
What is {item}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
<Accordion.ItemContext>
{#snippet render(context)}
<div style="display: inline-flex; gap: 0.5rem;">
<span>Expanded: {context().expanded}</span>
<span>Focused: {context().focused}</span>
<span>Disabled: {context().disabled}</span>
</div>
{/snippet}
</Accordion.ItemContext>
</Accordion.ItemTrigger>
<Accordion.ItemContent>{item} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
</Accordion.Item>
{/each}
</Accordion.Root>
API Reference
Root
Prop | Default | Type |
---|---|---|
asChild | boolean 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 expanded accordion items. Use when you don't need to control the value of the accordion. | |
disabled | boolean Whether the accordion items are disabled | |
id | string The unique identifier of the machine. | |
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 multiple 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 controlled value of the expanded accordion items. |
Data Attribute | Value |
---|---|
[data-scope] | accordion |
[data-part] | root |
[data-orientation] | The orientation of the accordion |
ItemContent
Prop | Default | Type |
---|---|---|
asChild | boolean 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 | boolean 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 | boolean 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 | boolean 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 | boolean 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. |