What is it?

Can I customize it?

Svelte is awesome, huh?

Edit props

Props

Close

---

Multiple Disabled

Features

• 🎹 Keyboard navigation
• 🍃 Can expand one or multiple items

Usage

Builder

<script lang="ts">
  import { Accordion, type AccordionItem } from "melt/builders";

  type Item = AccordionItem<{
    title: string;
    description: string;
  }>;

  const items: Item[] = [
    { id: "item-1", title: "What is it?", description: "..."},
    { id: "item-2", title: "Can I customize it?", description: "..."},
  ];

  const accordion = new Accordion();
</script>

<div {...accordion.root}>
  {#each items as i}
    {@const item = accordion.getItem(i)}
    <h2 {...item.heading}>
      <button {...item.trigger}>
        {item.item.title}
      </button>
    </h2>

    <div {...item.content}>
      {item.item.description}
    </div>
  {/each}
</div>

API Reference

Constructor Props

The props that are passed when calling

new Accordion()

new Accordion()

export type AccordionProps<Multiple extends boolean = false> = {
  /**
   * If `true`, multiple accordion items can be open at the same time.
   *
   * @default false
   */
  multiple?: MaybeGetter<Multiple | undefined>;

  /**
   * When `true`, prevents the user from interacting with the accordion.
   *
   * @default false
   */
  disabled?: MaybeGetter<boolean | undefined>;

  /**
   * The controlled value for the accordion.
   */
  value?: AccordionValue<Multiple>;

  /**
   * The callback invoked when the value of the Accordion changes.
   */
  onValueChange?: OnMultipleChange<string, Multiple>;
};

export type AccordionProps<Multiple extends boolean = false> = {
  /**
   * If `true`, multiple accordion items can be open at the same time.
   *
   * @default false
   */
  multiple?: MaybeGetter<Multiple | undefined>;

  /**
   * When `true`, prevents the user from interacting with the accordion.
   *
   * @default false
   */
  disabled?: MaybeGetter<boolean | undefined>;

  /**
   * The controlled value for the accordion.
   */
  value?: AccordionValue<Multiple>;

  /**
   * The callback invoked when the value of the Accordion changes.
   */
  onValueChange?: OnMultipleChange<string, Multiple>;
};

Methods

The methods returned from

new Accordion()

new Accordion()

• getItem

  <Meta extends Record<string, unknown>>(
    item: AccordionItem<Meta>,
  ) => Item<Meta, Multiple>

  <Meta extends Record<string, unknown>>(
    item: AccordionItem<Meta>,
  ) => Item<Meta, Multiple>

  Returns an Item class with the necessary spread attributes for an accordion item. @param item
• isExpanded

  (id: string) => boolean

  (id: string) => boolean

  Checks if an item is currently expanded. @param id - ID of the item to check.
• expand

  (id: string) => void

  (id: string) => void

  Expands a specific item. @param id - ID of the item to expand.
• collapse

  (id: string) => void

  (id: string) => void

  Collapses a specific item. @param id - ID of the item to collapse.
• toggleExpanded

  (id: string) => void

  (id: string) => void

  Toggles the expanded state of an item. @param id - ID of the item to toggle.

Properties

The properties returned from

new Accordion()

new Accordion()

• multiple

  Multiple extends null | undefined
    ? Multiple | undefined
    : Multiple | Exclude<Multiple, null | undefined>

  Multiple extends null | undefined
    ? Multiple | undefined
    : Multiple | Exclude<Multiple, null | undefined>
• disabled

  boolean

  boolean
• value

  FalseIfUndefined<Multiple>>

  FalseIfUndefined<Multiple>>
• root

  { "data-melt-accordion-root": string; id: string }

  { "data-melt-accordion-root": string; id: string }

  Spread attributes for the accordion root element.