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

Usage

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@/ui/accordion';
<Accordion @type="single" @collapsible={{true}}>
  <AccordionItem @value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
 
  <AccordionItem @value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that matches the other components'
      aesthetic.
    </AccordionContent>
  </AccordionItem>
 
  <AccordionItem @value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. It's animated by default, but you can disable it if you prefer.
    </AccordionContent>
  </AccordionItem>
</Accordion>

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 item.