Ark Logo

Accordion

A collapsible component for displaying content in a vertical stack.

Pudding donut gummies chupa chups oat cake marzipan biscuit tart. Dessert macaroon ice cream bonbon jelly. Jelly topping tiramisu halvah lollipop.

Anatomy

To set up the avatar correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Multiple Panels Open

For an Accordion that allows keeping multiple panels open, apply the multiple prop:

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>
  )
}

API Reference

Root

PropDefaultType
asChild
(props: ParentProps<'div'>) => Element

collapsiblefalse
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

id
string

The unique identifier of the machine.

ids
Partial<{ root: string item(value: string): string content(value: string): string trigger(value: string): string }>

The ids of the elements in the accordion. Useful for composition.

lazyMountfalse
boolean

Whether to enable lazy mounting

multiplefalse
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.

unmountOnExitfalse
boolean

Whether to unmount on exit.

value
string[]

The `value` of the accordion items that are currently being expanded.

Data AttributeValue
[data-scope]accordion
[data-part]root
[data-orientation]The orientation of the accordion

ItemContent

PropDefaultType
asChild
(props: ParentProps<'div'>) => Element

Data AttributeValue
[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

PropDefaultType
asChild
(props: ParentProps<'div'>) => Element

Data AttributeValue
[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

PropDefaultType
value
string

The value of the accordion item.

asChild
(props: ParentProps<'div'>) => Element

disabled
boolean

Whether the accordion item is disabled.

Data AttributeValue
[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

PropDefaultType
asChild
(props: ParentProps<'button'>) => Element

Data AttributeValue
[data-scope]accordion
[data-part]item-trigger
[data-orientation]The orientation of the item
[data-state]"open" | "closed"

Accessibility

Complies with the Accordion WAI-ARIA design pattern.

Keyboard Support

KeyDescription
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.