Frequently asked questions
Reveal answers on demand in a compact list.
Components / Navigation
Accordion
A keyboard-navigable disclosure group with single or multiple open sections.
Preview
Standard delivery takes three to five business days.
Use cases
Grouped settings
Allow several independent setting sections to remain open.
Usage example
Vue
<script setup lang="ts">
import { ref } from 'vue'
import Accordion from './components/ui/accordion/Accordion.vue'
import AccordionContent from './components/ui/accordion/AccordionContent.vue'
import AccordionItem from './components/ui/accordion/AccordionItem.vue'
import AccordionTrigger from './components/ui/accordion/AccordionTrigger.vue'
const openSection = ref('billing')
</script>
<template>
<Accordion v-model="openSection" collapsible>
<AccordionItem value="billing">
<AccordionTrigger>Billing</AccordionTrigger>
<AccordionContent>Billing details</AccordionContent>
</AccordionItem>
<AccordionItem value="security">
<AccordionTrigger>Security</AccordionTrigger>
<AccordionContent>Security settings</AccordionContent>
</AccordionItem>
</Accordion>
</template>More examples
FAQ
One question stays open at a time.
FAQ
<script setup lang="ts">
import Accordion from './components/ui/accordion/Accordion.vue'
import AccordionContent from './components/ui/accordion/AccordionContent.vue'
import AccordionItem from './components/ui/accordion/AccordionItem.vue'
import AccordionTrigger from './components/ui/accordion/AccordionTrigger.vue'
</script>
<template>
<Accordion collapsible>
<AccordionItem value="invite"><AccordionTrigger>How do I invite a teammate?</AccordionTrigger><AccordionContent>Open Members and choose Invite.</AccordionContent></AccordionItem>
<AccordionItem value="export"><AccordionTrigger>Can I export data?</AccordionTrigger><AccordionContent>Use Export from the project settings page.</AccordionContent></AccordionItem>
</Accordion>
</template>Multiple sections
Use an array model when several panels can stay expanded.
Multiple sections
<script setup lang="ts">
import { ref } from 'vue'
import Accordion from './components/ui/accordion/Accordion.vue'
import AccordionContent from './components/ui/accordion/AccordionContent.vue'
import AccordionItem from './components/ui/accordion/AccordionItem.vue'
import AccordionTrigger from './components/ui/accordion/AccordionTrigger.vue'
const open = ref<string[]>(['profile'])
</script>
<template>
<Accordion v-model="open" multiple>
<AccordionItem value="profile"><AccordionTrigger>Profile</AccordionTrigger><AccordionContent>Public details</AccordionContent></AccordionItem>
<AccordionItem value="privacy"><AccordionTrigger>Privacy</AccordionTrigger><AccordionContent>Visibility settings</AccordionContent></AccordionItem>
</Accordion>
</template>Key API
The most useful props, models, slots, events, and methods for this component.
| Name | Type | Default or requirement |
|---|---|---|
v-model | string | string[] | '' |
multiple | boolean | false |
collapsible | boolean | false |
disabled | boolean | false |
AccordionItem value | string | required |
AccordionItem disabled | boolean | false |
AccordionTrigger headingLevel | 2 | 3 | 4 | 5 | 6 | 3 |
Each trigger is linked to its panel. Arrow keys, Home, and End move between enabled triggers. Place AccordionItem, AccordionTrigger, and AccordionContent inside Accordion.
Implementation notes
- Choose collapsible when a single-selection accordion should allow every panel to close.
- Use multiple for independent sections, and give each item a stable value.
Accessibility and localization
- Triggers and panels have linked ARIA relationships; arrow keys, Home, and End navigate enabled triggers.