Melt UI Logo

Accordion

An interactive component that enables the organization and navigation of content by allowing users to expand and collapse sections.

Features

  • Full keyboard navigation
  • Can expand one or multiple items
  • Can be controlled or uncontrolled

Anatomy

  • Root: The root container for the accordion
  • Item: The container for each accordion item
  • Trigger: The trigger for the accordion item
  • Content: The content area that is revealed when the trigger is clicked

Usage

To create an accordion, use the createAccordion builder function. Follow the anatomy or the example at the top of this page to create your accordion.

Disabling a single item

To disable a single item, you can pass in an object instead of a string to the function.

    <div class="accordion-item" {...$item({ value: 'item-3', disabled: true })}>Item 3</div>

Opening multiple items at once

Pass in the type argument to createAccordion with a value of 'multiple'.

    <script lang="ts">
  const { content, item, trigger, isSelected, root } = createAccordion({
    type: 'multiple'
  })
</script>

Controlled access

To programatically control the Accordion, you can directly set the value store. You can also update the options store with new arguments.

    <script lang="ts">
  import { createAccordion } from '@melt-ui/svelte'
 
  let value: string | string[] | undefined = 'item-1'
  let disabled = false
 
  const {
    content,
    item,
    trigger,
    root,
    value: valueStore,
    options
  } = createAccordion({
    value,
    disabled
  })
 
  $: valueStore.set(value)
  valueStore.subscribe((v) => (value = v))
  $: options.update((o) => ({ ...o, disabled }))
</script>
 
<button
  on:click={() => {
    const randPick = Math.floor(Math.random() * 3) + 1
    value = `item-${randPick}`
  }}>
  Trigger randomly
</button>
 
<p>Value: {value} Value Store: {$valueStore}</p>
 
<div {...root}>
  <div {...$item('item-1')}>
    <button {...$trigger('item-1')} use:trigger>Is it accessible?</button>
    <div {...$content('item-1')}>
      <div>Yes. It adheres to the WAI-ARIA design pattern.</div>
    </div>
  </div>
 
  <div {...$item('item-2')}>
    <button {...$trigger('item-2')} use:trigger>Is it accessible?</button>
    <div {...$content('item-2')}>
      <div>Yes. It adheres to the WAI-ARIA design pattern.</div>
    </div>
  </div>
 
  <div {...$item('item-3')}>
    <button {...$trigger('item-3')} use:trigger>Is it accessible?</button>
    <div {...$content('item-3')}>
      <div>Yes. It adheres to the WAI-ARIA design pattern.</div>
    </div>
  </div>
</div>

API Reference

createAccordion

Props

Prop Default Type / Description
value -
string | string[] | undefined

The value of the currently open item. You can also pass an array of values to open multiple items at once if the accordion is of type multiple.
type 'single'
'single' | 'multiple'

The type of accordion to create. A 'single' accordion only allows one item to be open at a time. A 'multiple' accordion allows multiple items to be open at a time.
disabled false
boolean

Whether or not the accordion is disabled.

Returned Props

Returned Prop Type Description
isSelected
Readable<(key: string) => boolean>

A derived store that takes a key and returns whether or not the item is selected.
options
Writable<CreateAccordionProps>

A writable store with the options used to create the accordion.
root
-

The builder store used to create the accordion root.
item
-

The builder store used to create accordion items.
trigger
-

The builder store used to create accordion triggers.
content
-

The builder store used to create accordion content.

root

Data Attributes

Data Attribute Value
[data-orientation]

'vertical' | 'horizontal'
[data-melt-accordion]

Present on all accordion root elements.

trigger

Props

Prop Default Type / Description
disabled false
boolean

Whether or not the trigger is disabled.
value -
string | string[] | undefined

The value of the associated accordion item.

Data Attributes

Data Attribute Value
[data-melt-accordion-trigger]

Present on all accordion trigger elements.
[data-disabled]

Present when the trigger is disabled.
[data-value]

The value of the associated item.

item

Props

Prop Default Type / Description
value -
string
disabled false
boolean

Data Attributes

Data Attribute Value
[data-state]

'open' | 'closed'
[data-disabled]

Present when the item is disabled.
[data-melt-accordion-item]

Present on all accordion item elements.

content

Props

Prop Default Type / Description
value -
string

The value of associated accordion item.
disabled false
boolean

Whether or not the content is disabled.

Data Attributes

Data Attribute Value
[data-state]

'open' | 'closed'
[data-disabled]

Present when the content is disabled.
[data-melt-accordion-content]

Present on all accordion content elements.

Accessibility

Adheres to the Accordion WAI-ARIA design pattern

Key Behavior
Space

When the trigger of a collapsed section is focused, expands the section.
Enter

When the trigger of a collapsed section is focused, 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 element.
ArrowUp

Moves focus to the previous trigger element.
Home

When focus is on a trigger, moves focus to the first trigger.
End

When focus is on a trigger, moves focus to the last trigger.