Accordion

SAccordion is a set of collapsible sections. It is built on Reka UI (roles, keyboard navigation, aria-expanded). The single mode keeps one section open, multiple allows any number. Sections come from the items prop or from a slot with hand-written SAccordionItem elements (each section is a reusable item, the chevron is an SIcon). Expansion is controlled with v-model.

Single mode

Multiple mode

Use the slot and SAccordionItem for sections with arbitrary content.

Icons

The expand-icon prop of SAccordionItem sets the expand indicator icon (a registry name, plus here).

Disabled item

The disabled prop of SAccordionItem locks the section so it cannot be expanded.

Custom title

The #title slot replaces the title prop, so the header can hold an icon or any markup.

Collapsible single mode

In single mode the collapsible prop lets the user close the open section (without it, one section always stays expanded).

API

SAccordion

Props

Name	Type	Default	Description
type	"single" | "multiple"	"single"	Mode: single expands one section at a time, multiple expands any number.
collapsible	boolean	true	In single mode, allows collapsing the open section (closing all). Ignored in multiple.
items	{ value: string; title?: string; content?: string; disabled?: boolean }[]	undefined	Sections (an alternative to the default slot with hand-written SAccordionItems).
disabled	boolean	undefined	Disables the whole accordion.
square	boolean	undefined	Square corners: removes the border radius (rounded by default).
model-value	string | string[]	undefined	Expanded section (single) or array of expanded sections (multiple). Two-way bound via v-model.

Events

Name	Signature	Description
update:modelValue	( value: | string | string[] | undefined ) => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
default	Custom set of SAccordionItem (instead of the items prop).

SAccordionItem

Props

Name	Type	Default	Description
value*	string	required	Unique item value within SAccordion (used to control expansion).
title	string	undefined	Item title (alternative to the title slot).
disabled	boolean	undefined	Disables the item: it cannot be expanded or collapsed.
expand-icon	string	"chevron-down"	Expand indicator icon.

Slots

Name	Description
title	Custom item header (instead of the title prop).
default	Collapsible item content.