Accordion

Basic accordion

Content for section 1.

Open: 1

<script setup>
import { ref } from 'vue'
const value = ref('1')
</script>

<template>
  <FuiAccordion v-model="value" type="single">
    <FuiAccordionItem value="1">
      <FuiAccordionHeader>Section 1</FuiAccordionHeader>
      <FuiAccordionPanel>Content</FuiAccordionPanel>
    </FuiAccordionItem>
  </FuiAccordion>
</template>

Multiple open

Content for section 1.

Open: 1

<script setup>
import { ref } from 'vue'
const value = ref(['1'])
</script>

<template>
  <FuiAccordion v-model="value" type="multiple">
    <FuiAccordionItem value="1">
      <FuiAccordionHeader>Section 1</FuiAccordionHeader>
      <FuiAccordionPanel>Content</FuiAccordionPanel>
    </FuiAccordionItem>
  </FuiAccordion>
</template>

Props

Prop	Type	Default	Description
modelValue	string | string[]	''	v-model value (string for single, array for multiple)
type	single | multiple	single	Accordion behavior
collapsible	boolean	true	Allow collapse all
size	small | medium | large	medium	Accordion size