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;
}
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({ defaultValue: ['React'] })
return (
<>
<button onClick={() => accordion.setValue(['Vue'])}>Set to Vue</button>
<Accordion.RootProvider value={accordion}>
{['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.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({ defaultValue: ['React'] })
return (
<>
<button onClick={() => accordion().setValue(['Vue'])}>Set to Vue</button>
<Accordion.RootProvider value={accordion}>
<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.RootProvider>
</>
)
}
<script setup lang="ts">
import { Accordion, useAccordion } from '@ark-ui/vue/accordion'
import { ref } from 'vue'
import { ChevronDownIcon } from 'lucide-vue-next'
const items = ref(['React', 'Solid', 'Vue'])
const accordion = useAccordion({ 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>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{{ item }} is a JavaScript library for building user interfaces.
</Accordion.ItemContent>
</Accordion.Item>
</Accordion.RootProvider>
</template>
If you're using the
RootProvider
component, you don't need to use theRoot
component.
Acessing the focused item
Use the focusedValue
property to get the value of the focused accordion item.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const ContextFocusedValue = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => <span>Focused item: {context.focusedValue}</span>}
</Accordion.Context>
{['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 ContextFocusedValue = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => <span>Focused item: {context().focusedValue}</span>}
</Accordion.Context>
<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 '../icons'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root :defaultValue="['React']">
<Accordion.Context v-slot="context">
<span>Focused item: {{ context.focusedValue }}</span>
</Accordion.Context>
<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>
Acessing the selected items
Use the value
property to get the selected accordion items.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const ContextValue = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => <span>Selected items: {context.value.join(', ')}</span>}
</Accordion.Context>
{['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 ContextValue = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => <span>Selected items: {context().value.join(', ')}</span>}
</Accordion.Context>
<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 '../icons'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root :defaultValue="['React']">
<Accordion.Context v-slot="context">
<span>Selected items: {{ context.value.join(', ') }}</span>
</Accordion.Context>
<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>
Setting the selected items
Use the setValue
method to set the selected accordion items.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const ContextSetValue = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => <button onClick={() => context.setValue(['Vue'])}>Select Vue</button>}
</Accordion.Context>
{['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 ContextSetValue = () => {
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => <button onClick={() => context().setValue(['Vue'])}>Select Vue</button>}
</Accordion.Context>
<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 '../icons'
const items = ref(['React', 'Solid', 'Vue'])
</script>
<template>
<Accordion.Root :defaultValue="['React']">
<Accordion.Context v-slot="context">
<button @click="context.setValue(['Vue'])">Select Vue</button>
</Accordion.Context>
<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 an item's state
Use the getItemState
method to get the state of an accordion item.
import { Accordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
export const ContextGetItemState = () => {
const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => {
const itemState = context.getItemState(items[2])
return (
<>
<b>Vue State: </b>
<span>Disabled: {itemState.disabled ? 'Y' : 'N'} </span>
<span>Expanded: {itemState.expanded ? 'Y' : 'N'} </span>
<span>Focused: {itemState.focused ? 'Y' : 'N'} </span>
</>
)
}}
</Accordion.Context>
{items.map((item) => (
<Accordion.Item key={item.value} {...item}>
<Accordion.ItemTrigger>
What is {item.value}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item.value} 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 ContextGetItemState = () => {
const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }]
return (
<Accordion.Root defaultValue={['React']}>
<Accordion.Context>
{(context) => {
const itemState = context().getItemState(items[2])
return (
<>
<b>Vue State: </b>
<span>Disabled: {itemState.disabled ? 'Y' : 'N'} </span>
<span>Expanded: {itemState.expanded ? 'Y' : 'N'} </span>
<span>Focused: {itemState.focused ? 'Y' : 'N'} </span>
</>
)
}}
</Accordion.Context>
<Index each={items}>
{(item) => (
<Accordion.Item {...item()}>
<Accordion.ItemTrigger>
What is {item().value}?
<Accordion.ItemIndicator>
<ChevronDownIcon />
</Accordion.ItemIndicator>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
{item().value} 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 '../icons'
const items = ref([{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }])
</script>
<template>
<Accordion.Root :defaultValue="['React']">
<Accordion.Context v-slot="context">
<b>Vue State:</b>
<span>Disabled: {{ context.getItemState(items[2]).disabled ? 'Y' : 'N' }}</span>
<span>Expanded: {{ context.getItemState(items[2]).expanded ? 'Y' : 'N' }}</span>
<span>Focused: {{ context.getItemState(items[2]).focused ? 'Y' : 'N' }}</span>
</Accordion.Context>
<Accordion.Item v-for="item in items" :key="item.value" v-bind="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>
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 accordion when it is first rendered. Use when you do not need to control the state 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 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 | 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. |