Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
When To Use
Use accordions to vertically stack sections of content that can be expanded or collapsed to reveal more information. They're useful for:
- Organizing content into logical sections
- Conserving vertical space by hiding content until needed
- Creating FAQ sections
- Simplifying complex forms or interfaces
Examples
Props
Accordion
| Prop | Type | Default |
|---|---|---|
orientation? | "horizontal" | "vertical" | vertical |
disabled? | boolean | false |
onValueChange? | ((value: string) => void) | ((value: string[]) => void) | - |
value? | string | string[] | - |
type | "single" | "multiple" | - |
asChild? | boolean | - |
key? | Key | null | - |
AccordionItem
| Prop | Type | Default |
|---|---|---|
value | string | - |
disabled? | boolean | false |
asChild? | boolean | - |
key? | Key | null | - |
AccordionTrigger
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
value? | string | number | readonly string[] | - |
type? | "button" | "submit" | "reset" | - |
name? | string | - |
formTarget? | string | - |
formNoValidate? | boolean | - |
formMethod? | string | - |
formEncType? | string | - |
formAction? | string | ((formData: FormData) => void | Promise<void>) | - |
disabled? | boolean | - |
key? | Key | null | - |
form? | string | - |
AccordionContent
| Prop | Type | Default |
|---|---|---|
forceMount? | true | - |
asChild? | boolean | - |
key? | Key | null | - |