Components

Accordion

Display collapsible sections with single or multiple open items.

Install with the CLI

npx @vyui/cli add accordion

Overview

VyAccordion renders a collection of expandable items on top of the @vyui/core accordion primitives. It supports controlled and uncontrolled state, single or multiple selection, disabled items, static content, and per-item named slots.

Usage

Import the component from @vyui/kit and pass an items array. Each example below renders the real component live.

Multiple open items

Set type="multiple" and bind an array with v-model.

Disabled items

Set disabled on an item to prevent it from opening.

Controlled value

Bind v-model to drive the open item from outside the component.

Custom item content

Use item.slot to select a named slot for one item. Every item slot receives item, index, and open.

<script setup lang="ts">
import { VyAccordion } from '@vyui/kit'

const items = [
  { value: 'profile', label: 'Profile', slot: 'profile' },
  { value: 'help', label: 'Help', content: 'Contact [email protected].' },
]
</script>

<template>
  <VyAccordion :items="items">
    <template #profile="{ open }">
      <view class="p-4">
        <text>{{ open ? 'Profile settings are open.' : '' }}</text>
      </view>
    </template>
  </VyAccordion>
</template>

Features and behavior

type="single" allows one open item and is the default. type="multiple" allows several.
In single mode, collapsible defaults to true, so the current item can be closed.
modelValue controls the open item or items; defaultValue initializes uncontrolled state.
An item uses its value as its identity, falling back to its zero-based index converted to a string.
item.trailingIcon overrides the component-level trailingIcon. The final fallback is appConfig.ui.icons.chevronDown, then i-lucide-chevron-down.
Content is only created when an item has content, a matching named slot, the content slot, or the body slot.
unmountOnHide defaults to true, removing closed content from the rendered tree.

Accordion item

Field	Type	Default	Description
`label`	`string`	—	Text displayed in the trigger.
`icon`	`string`	—	Leading Iconify icon name.
`trailingIcon`	`string`	Inherited	Per-item toggle icon.
`slot`	`string`	`'content'`	Named slot used for this item's panel.
`content`	`string`	—	Static panel text used when no slot replaces it.
`value`	`string`	Item index	Unique open-state value.
`disabled`	`boolean`	`false`	Prevents interaction with this item.
`[key: string]`	`any`	—	Additional application data forwarded in slot props.

API

These tables are generated directly from the component source.

Props

Prop	Default	Type
`collapsible`	`true`	`boolean \| undefined` `single`-only: lets the user close the currently open item.
`defaultValue`	—	`string \| string[] \| undefined` Open value(s) at mount time when uncontrolled.
`disabled`	—	`boolean \| undefined`
`items`	—	`AccordionItem[] \| undefined`
`modelValue`	—	`string \| string[] \| undefined` Controlled open value(s).
`trailingIcon`	—	`string \| undefined` Default trailing icon. Defaults to `appConfig.ui.icons.chevronDown`.
`type`	`"single"`	`"single" \| "multiple" \| undefined` `'single'` allows one open item; `'multiple'` allows many.
`ui`	—	`Partial<Record<"trailingIcon" \| "root" \| "item" \| "header" \| "trigger" \| "content" \| "body" \| "bodyText" \| "leadingIcon" \| "label", any>> \| undefined`
`unmountOnHide`	`true`	`boolean \| undefined` Whether closed item content should unmount.

Emits

Event	Payload
`update:modelValue`	`[value: string \| string[] \| undefined]`

Slots

All item slots receive { item: AccordionItem, index: number, open: boolean }.

Slot	Bindings
`leading`	`{ item: AccordionItem; index: number; open: boolean; }`
`default`	`{ item: AccordionItem; index: number; open: boolean; }`
`trailing`	`{ item: AccordionItem; index: number; open: boolean; }`
`content`	`{ item: AccordionItem; index: number; open: boolean; }`
`body`	`{ item: AccordionItem; index: number; open: boolean; }`

Built on `@vyui/core`

VyAccordion composes the headless @vyui/core accordion primitives. Use them directly when you need full control over markup and styling.

The primitive anatomy is:

<AccordionRoot>
  <AccordionItem value="...">
    <AccordionHeader>
      <AccordionTrigger />
    </AccordionHeader>
    <AccordionContent />
  </AccordionItem>
</AccordionRoot>

`AccordionRoot` props

Prop	Default	Type
`as`	—	`AsTag \| Component \| undefined` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	—	`boolean \| undefined` Change the default rendered element for the one passed as a child, merging their props and behavior. Use this when you need a component to render through a child element while keeping the primitive's props and behavior.
`collapsible`	`false`	`boolean \| undefined` When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect.
`defaultValue`	—	`T \| undefined` The default active value of the item(s). Use when you do not need to control the state of the item(s).
`dir`	—	`Direction \| undefined` The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.
`disabled`	`false`	`boolean \| undefined` When `true`, prevents the user from interacting with the accordion and all its items
`modelValue`	—	`T \| undefined` The controlled value of the active item(s). Use this when you need to control the state of the items. Can be bound with `v-model`
`orientation`	`"vertical"`	`DataOrientation \| undefined` The orientation of the accordion.
`type`	—	`SingleOrMultipleType \| undefined` Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from `modelValue` and `defaultValue`.
`unmountOnHide`	`true`	`boolean \| undefined` When `true`, the element will be unmounted on closed state.

`AccordionItem` props

Prop	Default	Type
`as`	—	`AsTag \| Component \| undefined` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`	—	`boolean \| undefined` Change the default rendered element for the one passed as a child, merging their props and behavior. Use this when you need a component to render through a child element while keeping the primitive's props and behavior.
`disabled`	—	`boolean \| undefined` Whether or not an accordion item is disabled from user interaction. When `true`, prevents the user from interacting with the item.
`unmountOnHide`	`undefined`	`boolean \| undefined` When `true`, the element will be unmounted on closed state.
`value`*	—	`string` A string value for the accordion item. All items within an accordion should use a unique value.

Styling and theming

Override the component globally through appConfig.ui.accordion or locally with ui. The actual theme slots are:

UI slot	Purpose
`root`	Accordion root container.
`item`	Item wrapper and divider.
`header`	Header layout around the trigger.
`trigger`	Interactive trigger row.
`content`	Collapsible panel wrapper.
`body`	Inner body layout.
`bodyText`	Static `item.content` text.
`leadingIcon`	Built-in leading icon.
`trailingIcon`	Toggle icon, including open-state rotation.
`label`	Trigger label text.

The only theme variant is disabled, which dims the trigger and applies a disabled cursor style. The default theme uses vyui's semantic tokens, so it adapts automatically under dark mode (see Theming → Dark Mode), and uses a simple transition instead of named web accordion keyframes.

Accessibility

The core trigger exposes native Lynx button semantics and announces collapsed or expanded. Disabled triggers are announced as disabled. Keep each label or custom default slot descriptive, and do not put unrelated interactive controls inside a trigger.

Platform notes

Built for Vue on Lynx; use native accessibility-* behavior rather than web-only aria-* assumptions.
The trailing icon rotates through the group-ui-open state class.
When CSS inheritance is disabled, static content color is applied directly to the nested bodyText element.

ActionSheet for a temporary list of actions.
Collapsible in @vyui/core for one headless disclosure region.
Tabs for switching between persistent peer panels.

Components

Guides and interactive examples for the documented @vyui/core primitives and @vyui/kit components.

Action Sheet

Present a mobile bottom sheet containing grouped actions.