Accordion

Single, collapsible expansion. An empty model closes every item. Custom content belongs in the default scoped slot.

Preview

Open in the playground

Usage

AccordionExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzAccordion } from '@chrisdalbano/forza-ui'
import type { ForzaAccordionItem } from '@chrisdalbano/forza-ui'
const expanded = ref<string>('')
const guide: ForzaAccordionItem[] = [
  {
    value: 'start',
    title: 'Where do I start?',
    content: 'Choose a role and set a budget.',
  },
]
</script>

<template>
  <FzAccordion v-model="expanded" label="Guide" :items="guide" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
items	readonly ForzaAccordionItem[]	Yes	None
label	string	Yes	None
disabled	boolean | undefined	No	None
modelValue	string | undefined	No	""

Events and state

v-model: string (single, collapsible)

• update:modelValue: [value: string]

Slots

title({item}), default({item})

Add from source

forza add accordion

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.