Accordion
Data DisplayA vertically stacked set of collapsible sections. Use accordions to organize content into expandable panels, saving space while keeping content accessible.
Import
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent
} from "@/components/ui/accordion";Usage
Basic Accordion
Single item open at a time
Sonance provides hidden audio solutions for residential, professional, and marine environments. Founded in 1983, we pioneered the world's first in-wall loudspeaker.
FAQ Section
Accordion used for frequently asked questions
API Reference
type"single""single" | "multiple"Whether one or multiple items can be open
defaultValue—string | string[]Initial open item(s)
collapsibletruebooleanWhether items can be fully collapsed
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | Whether one or multiple items can be open |
defaultValue | string | string[] | — | Initial open item(s) |
collapsible | boolean | true | Whether items can be fully collapsed |