Components / Collections
Accordion
Questions and details that open in place.
@fabrials/ui
In the operating system's secret store, never in the browser.
Needs review3
12
Twelve labels.
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@fabrials/ui";Or install it under shadcn's name, so code that imports
@/components/ui/accordiongets this control. See shims.npx shadcn@latest add @fabrials/accordion
API reference
| Prop / export | Type | Description |
|---|---|---|
multiple | boolean | Let several items stay open. |
defaultValue | string[] | Items open at first. |
Accordion variant | default | rows | rows is a stack of independent tools: 44 px header rows (icon, title, tags, chevron), the open row marked like the current item, bodies that stay mounted while closed (keepMounted is on by default there). |
AccordionTrigger headingLevel / headingRef | 2 | 3 | 4 / Ref | The level of the heading around the trigger; a ref makes the heading focusable and hands focus to the trigger. |
AccordionTrigger icon / aside | ReactNode | aside (tags, counts) sits outside the trigger: it is not part of the name, describes the trigger, and does not make the row a bigger target. Non-interactive. |
Behavior
Keep the answer short; long content belongs on its own page. Base UI's accordion has no arrow-key roving: each trigger is a tab stop. A row whose expansion lives in the URL is a link, not an accordion trigger.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.