Accordion
A stack of sections that expand and collapse.
Overview
Each trigger is a button. type="single" keeps one section open. type="multiple" allows several. Arrow keys move between triggers.
Preview
Customize
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add accordionUsage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
export function Faq() {
return (
<Accordion type="single" collapsible defaultValue="what">
<AccordionItem value="what">
<AccordionTrigger>What is Vinyaas?</AccordionTrigger>
<AccordionContent>
A source-installed component library.
</AccordionContent>
</AccordionItem>
</Accordion>
);
}Examples
FAQ
One answer is open. Opening another closes the first.
Settings
Several sections can stay open. Each panel holds a switch or a checkbox with its label.
In practice
A billing FAQ inside a Card. The first question opens by default; the rest stay collapsed until selected.
Common questions about your account, plans, payments and cancellations.
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | "single" | single keeps one item open. multiple allows several. |
value | string | string[] | — | Controlled open item, or the list of open items when type is multiple. |
defaultValue | string | string[] | — | The item or items open on first render. |
collapsible | boolean | true | When type is single, allows the open item to close. |
disabled | boolean | — | Disables the whole accordion, or one AccordionItem. |
Accessibility
The trigger uses aria-expanded and aria-controls. The panel uses the matching id. A disabled item is a disabled button.
- Enter and Space toggle the focused trigger.
- Arrow Up and Arrow Down move between triggers.
- Home and End move to the first and last enabled trigger.