Accordion

Last updated

2026-10-04 UTC

Demo

accordion/demo.vue

<script setup lang="ts">
const items = [
  { value: 'a', title: 'What is YunLeFun Design?', content: 'A shared system of guidelines, brand visuals and UI, with sky blue and vivid accents.' },
  { value: 'b', title: 'Why Reka UI?', content: 'Reka UI provides keyboard, focus and ARIA behavior; YunLeFun adds product APIs and themes. Each wrapped scenario is verified.' },
  { value: 'c', title: 'Does it support dark mode?', content: 'Token driven neutral surfaces follow daylight and night themes.' },
]
</script>

<template>
  <YlfAccordion :items="items" />
</template>

Accordion uses Reka UI for expansion, keyboard navigation and single/multiple mode. Tokens define appearance and height transitions.

Props

Prop	Description	Type	Default
v-model	Expanded items	string | string[]	—
items	Items { value, title, content?, disabled? }	AccordionItemData[]	—
type	Single / multiple	single | multiple	single
collapsible	Allow all items to collapse in single mode	boolean	true

Slots

Override an item's content with a slot named after its value.

Readonly item arrays are supported. A fully collapsed single accordion has value undefined; multiple mode uses a string array. Allow collapsed state in the consumer. Arrows and Home/End move focus between headings, skipping disabled items.