Accordion
Collapsible disclosure panels built on Radix Accordion primitive with ChevronDown 180-degree rotation convention.
// Radix — @radix-ui/react-accordion
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@shavin/ui";Default Accordion (Single Open)
Yes. It adheres to the WAI-ARIA Accordion pattern with keyboard arrow navigation.
Component Source
<Accordion type="single" collapsible defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>Yes. It adheres to the WAI-ARIA Accordion pattern.</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Is it styled with tokens?</AccordionTrigger>
<AccordionContent>Yes. Uses semantic role tokens for surface, hairline, and text colors.</AccordionContent>
</AccordionItem>
</Accordion>Ghost Variant (Ideal for Sidebar Navigation & Sub-menus)
Component Source
<Accordion type="single" collapsible variant="ghost">
<AccordionItem value="pickers">
<AccordionTrigger>Pickers</AccordionTrigger>
<AccordionContent>
<div className="flex flex-col space-y-1">
<a href="/components/color-picker" className="text-xs text-fg-muted hover:text-fg">Color Picker</a>
<a href="/components/date-picker" className="text-xs text-fg-muted hover:text-fg">Date Picker</a>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>Props Specification
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | — | — |
| defaultValue | string | string[] | — | The value of the item whose content is expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. |
| dir | "ltr" | "rtl" | — | The language read direction. |
| disabled | boolean | — | Whether or not an accordion is disabled from user interaction. |
| onValueChange | ((value: string) => void) | ((value: string[]) => void) | — | The callback that fires when the state of the accordion changes. |
| orientation | "horizontal" | "vertical" | vertical | The layout in which the Accordion operates. |
| type* | "single" | "multiple" | — | — |
| value | string | string[] | — | The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded. |
| variant | "default" | "outline" | "ghost" | null | "default" | — |
* required