Accordion

A toggle component for expanding and collapsing sections of content.

Anatomy

Usage

<script>
  import {Accordion} from 'ui-ingredients';
  import {ChevronDownIcon} from '$lib/icons';

  let items = [
    {
      value: 'one',
      label: 'Item 1',
      content: 'Item 1 Description',
    },
    {
      value: 'two',
      label: 'Item 2',
      content: 'Item 2 Description',
    },
    {
      value: 'three',
      label: 'Item 3',
      content: 'Item 3 Description',
    },
  ];
</script>

<Accordion.Root>
  {#each items as { value, label, content }}
    <Accordion.Item {value}>
      <Accordion.ItemTrigger>
        {label}

        <Accordion.ItemIndicator>
          <ChevronDownIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>

      <Accordion.ItemContent>
        {content}
      </Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>

API Reference

Root

Prop	Default	Description
`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`		`{ 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.
`keepMounted`		`boolean` Whether to keep the content mounted after exit.
`lazyMount`		`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.
`value`		`string[]` The controlled value of the expanded accordion items.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the accordion
`data-part`	root
`data-scope`	accordion

Item

Prop	Default	Description
`disabled`		`boolean` Whether the item is disabled.
`value`		`string` The value of the item.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-orientation`	The orientation of the item
`data-part`	item
`data-scope`	accordion
`data-state`	"open" \| "closed"

ItemContent

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-orientation`	The orientation of the item
`data-part`	item-content
`data-scope`	accordion
`data-state`	"open" \| "closed"

ItemIndicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-orientation`	The orientation of the item
`data-part`	item-indicator
`data-scope`	accordion
`data-state`	"open" \| "closed"

ItemTrigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the item
`data-part`	item-trigger
`data-scope`	accordion
`data-state`	"open" \| "closed"

Accessibility

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.