BbAccordion

Props

Name	Type	Default	Description
`eager`	`boolean \| undefined`	`false`	Prevents rendering content before it's made visible. The body is otherwise deferred to the first open. Reach for `eager` when something inside has to exist before then — most often a validated field, which does not take part in its form until it is mounted. If a collapsed panel can hold an invalid field, open it when validation fails. See example
`id`	`string \| undefined`	-	The identifier of the component. Makes the markup predictable: the body takes your id and the header button takes `<id>_header`, already cross-wired through `aria-controls` and `aria-labelledby`. Omitted, both are generated. See example
`modelValue`	`boolean \| undefined`	`false`	Used by v-model to trigger opening / closing the collapsible. An accordion with no `v-model` starts closed. One panel, one boolean. There is no group component — compose several accordions, and for single-open behaviour derive every panel from one active key rather than watching siblings. See example
`pt`	`PtMap<BbAccordionPtPart, "open"> \| undefined`	-	Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:<part>` row.
`pt:header`	`PtValue \| undefined`	-
`pt:header:open`	`PtValue \| undefined`	-
`pt:panel`	`PtValue \| undefined`	-
`pt:panel:open`	`PtValue \| undefined`	-
`pt:root`	`PtValue \| undefined`	-
`pt:root:open`	`PtValue \| undefined`	-
`transitionDuration`	`number \| undefined`	`250`	How long the transition has to last in milliseconds Milliseconds; the manifest default resolves to 250. One value drives the height and the fade together, and `prefers-reduced-motion: reduce` collapses both to near-instant on its own. See example

v-model

Values kept in sync through v-model.

Name	Type	Description
`modelValue`	`boolean \| undefined`	See example

Events

Name	Type	Description
`update:modelValue`	`(event: "update:modelValue", value: boolean): void`	Emitted on every toggle — a header click or a `toggle()` call — with the new open state. Listen to it for side effects such as analytics or a fetch on first open, and for single-open groups, where a `false` payload is what resets the active key. See example

Slots

The listed properties are the ones exposed to the slot scope.

Name Type Description

Name	Type	Description
`default`	`BbAccordionToggleSlotProps`	The collapsible body content shown when the accordion is open. Receives the same `{ value, toggle }` scope as the header. `toggle()` earns its keep here rather than in the header: it is how a long panel offers a Show less control without sending the reader back up to a header they can no longer see. See example
`header`	`BbAccordionToggleSlotProps`	Content rendered inside the accordion header button. Rendered inside the header button, which the component owns. Never put a `<button>` or an `<a>` in here: nesting interactive elements is invalid and splits the click target. Everything non-interactive is made click-transparent, which is what lets badges and icons ride along — and also why a `:hover` rule on them never fires. See example

default

BbAccordionToggleSlotProps

The collapsible body content shown when the accordion is open.

Receives the same { value, toggle } scope as the header. toggle() earns its keep here rather than in the header: it is how a long panel offers a Show less control without sending the reader back up to a header they can no longer see.

See example

header

BbAccordionToggleSlotProps

Content rendered inside the accordion header button.

Rendered inside the header button, which the component owns. Never put a <button> or an <a> in here: nesting interactive elements is invalid and splits the click target. Everything non-interactive is made click-transparent, which is what lets badges and icons ride along — and also why a :hover rule on them never fires.

See example