Layout & Structure

Accordion

A stack of collapsible sections where opening one can close the others.

Install

import { Accordion } from 'vael-ui'

multiple

collapsible

motionCss ?

import { Accordion } from 'vael-ui'

<Accordion :multiple="false" collapsible motionCss>Accordion</Accordion>

Name	Type	Default	Description
`multiple`	`boolean \| undefined`	`false`
`collapsible`	`boolean \| undefined`	`true`	Whether the last open item can close, leaving none open.
`motionCss`	`boolean \| undefined`	`true`	`false` skips transitions; use exposed `panelEl`/`open` for custom motion.
`ui`	`Partial<{ root: UiPartValue; }> \| undefined`
`value`	`string \| string[] \| null \| undefined`	`null`

Name	Type	Description
`default`	`{}`

Name	Type	Description
`change`	`[value: string \| string[] \| null]`
`update:value`	`[value: string \| string[] \| null]`

Name	Type	Description
`el`	`HTMLElement \| null`

One collapsible section of an Accordion, always used inside its tree.

Name	Type	Default	Description
`value`	`string`
`title`	`string \| undefined`
`disabled`	`boolean \| undefined`
`ui`	`Partial<{ item: UiPartValue; header: UiPartValue; trigger: UiPartValue; panel: UiPartValue; body: UiPartValue; }> \| undefined`

Name	Type	Description
`default`	`{ open: boolean; toggle: () => void; }`
`trigger`	`{ open: boolean; toggle: () => void; }`

Name	Type	Description
`panelEl`	`HTMLElement \| null`
`open`	`boolean`