npm i @velkin/react
import { VuAccordion } from "@velkin/react/accordion";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| multiple | boolean | true | When false, at most one item may be open at a time. Default: `true`. |
| collapsible | boolean | true | With `multiple={false}`, allows closing the last open panel. Default: `true`. |
| variant | VuAccordionVariant | "solid" | Visual variant of the container. Default: `"solid"`. |
| tone | VuAccordionTone | "normal" | Neutral surface weight for `solid` / `splitted` fills. Default: `"normal"`. |
| size | VuAccordionSize | "md" | Header/body density (`sm` \| `md` \| `lg`). Default: `"md"`. |
| disabled | boolean | false | Disables interaction for all direct items. Default: `false`. |
| flush | boolean | false | Removes the dividing line between items in `light`, `solid`, and `outline` variants. Default: `false`. |
| Event | Detail | Description |
|---|---|---|
| vu-open-change | VuAccordionItemOpenChangeDetail | Bubbles from items when their open state changes. |
| Slot | Description |
|---|---|
| — | - One or more direct `<vu-accordion-item>` children. |
| Part | Description |
|---|---|
| group | Wrapper that contains all slotted accordion items. |
| Method | Description |
|---|---|
| expandAll | Opens all items; in single mode opens only the first. |
| collapseAll | Closes all items (respects `collapsible` in single mode). |
| openItem | Opens an item by index; returns whether the operation succeeded. |
| closeItem | Closes an item by index; returns whether the operation succeeded. |
| toggleItem | Toggles an item by index; returns whether the operation succeeded. |
| focusItem | Moves focus to an item header by index. |
| Name | Definition |
|---|---|
| VuAccordionItemOpenChangeDetail | |
| VuAccordionSize | |
| VuAccordionTone | |
| VuAccordionVariant | |