Accordion

Organizes content into collapsible sections, allowing users to focus on one section at a time.

	<script lang="ts">
  import { Accordion } from "$lib";
  import { CaretDown } from "phosphor-svelte";
  import { slide } from "svelte/transition";
 
  const items = [
    {
      title: "Feature Overview",
      content:
        "Task management, messaging, file sharing, progress tracking, and reporting for your team."
    },
    {
      title: "Platform Advantages",
      content:
        "Experience improved productivity, enhanced communication, and customizable project views for project execution."
    },
    {
      title: "Implementation Strategies",
      content:
        "Define clear goals, provide training, encourage adoption, and iterate based on feedback."
    }
  ];
</script>
 
<Accordion.Root class="w-full sm:max-w-[70%]" multiple>
  {#each items as item, i}
    <Accordion.Item value="${i}" class="group border-b border-dark-10 px-1.5">
      <Accordion.Header>
        <Accordion.Trigger
          class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium transition-all [&[data-state=open]>span>svg]:rotate-180 "
        >
          {item.title}
          <span
            class="inline-flex items-center justify-center rounded-[7px] bg-transparent transition-all sq-8 hover:bg-dark-10"
          >
            <CaretDown class="transition-all duration-200 sq-[18px]" />
          </span>
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content
        transition={slide}
        transitionConfig={{ duration: 200 }}
        class="pb-[25px] text-sm tracking-[-0.01em]"
      >
        {item.content}
      </Accordion.Content>
    </Accordion.Item>
  {/each}
</Accordion.Root>

	<script lang="ts">
  import { Accordion } from "$lib";
  import { CaretDown } from "phosphor-svelte";
  import { slide } from "svelte/transition";
 
  const items = [
    {
      title: "Feature Overview",
      content:
        "Task management, messaging, file sharing, progress tracking, and reporting for your team."
    },
    {
      title: "Platform Advantages",
      content:
        "Experience improved productivity, enhanced communication, and customizable project views for project execution."
    },
    {
      title: "Implementation Strategies",
      content:
        "Define clear goals, provide training, encourage adoption, and iterate based on feedback."
    }
  ];
</script>
 
<Accordion.Root class="w-full sm:max-w-[70%]" multiple>
  {#each items as item, i}
    <Accordion.Item value="${i}" class="group border-b border-dark-10 px-1.5">
      <Accordion.Header>
        <Accordion.Trigger
          class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium transition-all [&[data-state=open]>span>svg]:rotate-180 "
        >
          {item.title}
          <span
            class="inline-flex items-center justify-center rounded-[7px] bg-transparent transition-all sq-8 hover:bg-dark-10"
          >
            <CaretDown class="transition-all duration-200 sq-[18px]" />
          </span>
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content
        transition={slide}
        transitionConfig={{ duration: 200 }}
        class="pb-[25px] text-sm tracking-[-0.01em]"
      >
        {item.content}
      </Accordion.Content>
    </Accordion.Item>
  {/each}
</Accordion.Root>

Structure

	<script lang="ts">
  import { Accordion } from "bits-ui";
</script>
 
<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger />
    </Accordion.Header>
    <Accordion.Content />
  </Accordion.Item>
</Accordion.Root>

	<script lang="ts">
  import { Accordion } from "bits-ui";
</script>
 
<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger />
    </Accordion.Header>
    <Accordion.Content />
  </Accordion.Item>
</Accordion.Root>

Component API

Accordion.Root

The root accordion component used to set and manage the state of the accordion.

Property	Type	Description
`multiple`	`boolean`	Whether or not multiple accordion items can be active at the same time. `Default: false`
`disabled`	`boolean`	Whether or not the accordion is disabled. `Default: false`
`value`	`union`	The active accordion item value. `Default: —— undefined`
`onValueChange`	`function`	A callback function called when the active accordion item value changes. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-orientation`	`enum`	The orientation of the accordion.
`data-accordion-root`		Present on the root element.

Accordion.Item

An accordion item.

Property	Type	Description
`value` * Required	`string`	The value of the accordion item. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the accordion item is disabled. `Default: false`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The state of the accordion item.
`data-disabled`		Present when the accordion item is disabled.
`data-accordion-item`	`——`	Present on the item element.

Accordion.Header

The accordion item header, which wraps the trigger and makes it more accessible.

Property	Type	Description
`level`	`enum`	The heading level to use for the header. This will be set as the `aria-level` attribute. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-heading-level`	`enum`	The heading level of the header.
`data-accordion-header`	`——`	Present on the header element.

Accordion.Trigger

The accordion item trigger, which opens and closes the accordion item.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The state of the accordion item.
`data-disabled`	`——`	Present when the accordion item is disabled.
`data-value`	`——`	The value of the accordion item.
`data-accordion-trigger`	`——`	Present on the trigger element.

Accordion.Content

The accordion item content, which is displayed when the item is open.

Property	Type	Description
`transition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`transitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`inTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`inTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`outTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`outTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The state of the accordion item.
`data-disabled`	`——`	Present when the accordion item is disabled.
`data-value`	`——`	The value of the accordion item.
`data-accordion-content`	`——`	Present on the content element.