components / accordion
Accordion
Stack of sections that expand and collapse, with keyboard navigation.
How to use
`type="single"` keeps one section open (add `collapsible` to allow closing it); `type="multiple"` lets several stay open. Use `defaultValue` or `value` + `onValueChange` (a string for single, `string[]` for multiple). Arrow Up/Down, Home and End move focus between headers.
preview
Accordion.tsx
import { Accordion, AccordionItem } from "vaiperui"; <Accordion type="single" collapsible defaultValue="payment"> <AccordionItem value="payment" title="Which payment methods?"> We accept credit card, bank slip and Pix. </AccordionItem></Accordion>Multiple
preview
multiple.tsx
<Accordion type="multiple" defaultValue={["payment", "shipping"]}>…</Accordion>Colors
preview
colors.tsx
<Accordion type="single" variantColor="primary">…</Accordion><Accordion type="single" variantColor="success">…</Accordion><Accordion type="single" variantColor="warning">…</Accordion><Accordion type="single" variantColor="danger">…</Accordion>Props
| Prop | Values | Default | Description |
|---|---|---|---|
| type | single | multiple | required | One or several sections open |
| collapsible | boolean | false | Single only: allow closing the open section |
| value / defaultValue | string | string[] | none | Open item value(s), controlled / initial |
| onValueChange | (value) => void | none | Called with the new value(s); "" when single closes |
| variantColor | primary | success | warning | danger | primary | Focus ring color |
| customColor | string | { light, dark } | none | Any CSS color (or a pair per theme) for the focus ring |
| animation | none | smooth | fast | bounce | smooth | Chevron transition |
| value (item) | string | required | AccordionItem identifier |
| title (item) | ReactNode | required | AccordionItem header |
| disabled (item) | boolean | false | Cannot be expanded or focused |
| (native) | div | none | Every native prop of the element, className, ref, etc. |