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-vue/accordion

Usage

<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
</script>
 
<template>
  <Accordion type="single" collapsible>
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

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 AccordionItem to disable individual items.

Borders

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

Card

Wrap the Accordion 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.
defaultValuestring | string[]—The value of the item(s) to expand by default.
disabledbooleanfalseWhen true, prevents the user from interacting with the accordion.