120k
New

Accordion

PreviousNext

A vertically stacked set of interactive headings that each reveal a section of content.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/accordion

Usage

<script lang="ts">
  import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>
<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Examples

Basic

A basic accordion that shows one item at a time. The first item is open by default.

Multiple

Use type="multiple" to allow multiple items to be open at the same time.

Disabled

Use the disabled prop on Accordion.Item to disable individual items.

Borders

Add border to the Accordion.Root and border-b last:border-b-0 to the Accordion.Item to add borders to the items.

Card

Wrap the Accordion.Root in a Card component.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

PropTypeDefaultDescription
type"single" | "multiple""single"Determines whether one or multiple items can be opened at the same time.
collapsiblebooleanfalseWhen type is "single", allows closing content when clicking trigger for an open item.
valuestring | string[]—The controlled value of the item(s) to expand.
disabledbooleanfalseWhen true, prevents the user from interacting with the accordion item.