Accordion

#Basic usage

Interfaces are warm paper, content is ink, hierarchy is light — never pure white, never a hard pop.

accordion/basic.vue

<script setup lang="ts">
import { Accordion } from "@bysages/vue";

const items = [
  {
    value: "paper",
    title: "What is the paper-and-ink system?",
    body: "Interfaces are warm paper, content is ink, hierarchy is light — never pure white, never a hard pop.",
  },
  {
    value: "tokens",
    title: "Where do visual values come from?",
    body: "Every color, spacing, radius, elevation, and duration resolves from design tokens; a hardcoded pixel is a bug.",
  },
  {
    value: "ark",
    title: "Who owns the interaction?",
    body: "Headless machinery owns state, ARIA, and positioning; the style layer dresses the anatomy it renders.",
  },
];
</script>

<template>
  <Accordion.Root :default-value="['paper']">
    <Accordion.Item v-for="item in items" :key="item.value" :value="item.value">
      <Accordion.ItemTrigger>
        {{ item.title }}
        <Accordion.ItemIndicator>
          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path
              d="M4 6l4 4 4-4"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>
        <p>{{ item.body }}</p>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

#Props

#ItemContent

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemContext

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`disabled`	`boolean \| undefined`		Whether the accordion item is disabled.
`value`	`string`		The value of the accordion item.

#Root

Prop	Type	Default	Description
`collapsible`	`boolean`	`false`	Whether an accordion item can be closed after it has been expanded.
`defaultValue`	`string[]`		The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion.
`disabled`	`boolean`		Whether the accordion items are disabled
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; item(value: string): string; itemContent(value: string): string; itemTrigger(value: string): string; }>`		The ids of the elements in the accordion. Useful for composition.
`modelValue`	`string[]`		The v-model value of the accordion
`multiple`	`boolean`	`false`	Whether multiple accordion items can be expanded at the same time.
`orientation`	`'horizontal' \| 'vertical'`	`"vertical"`	The orientation of the accordion items.