Accordion
A vertically stacked set of collapsible sections.
Installation
npx neobrutal add accordion
Or install the dependency and copy the code:
npm install @base-ui/react
Usage
import {Accordion,AccordionContent,AccordionItem,AccordionTrigger,} from "@/components/ui/accordion"
<Accordion><AccordionItem value="item-1"><AccordionTrigger>Section Title</AccordionTrigger><AccordionContent>Section content goes here.</AccordionContent></AccordionItem></Accordion>
Examples
Multiple
Allow multiple sections to be open at once.
Default Open
Set a section to be open by default.
This section starts open.
Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Determines whether one or multiple items can be opened at the same time. |
| collapsible | boolean | false | When type is 'single', allows closing the content when clicking the trigger for an open item. |
| defaultValue | string | string[] | - | The value of the item(s) to expand by default. |
| value | string | string[] | - | The controlled value of the item(s) to expand. |
| onValueChange | (value: string | string[]) => void | - | Event handler called when the expanded state changes. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | string | - | A unique value for the item. |
| disabled | boolean | false | When true, prevents the user from interacting with the item. |