Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Examples

Default

<script setup>
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@empathyds/vue'
</script>

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. It comes with default styles that matches the other components.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

Prop	Type	Default	Description
type	string	-	The type of accordion.
collapsible	boolean	false	Whether an accordion item can be collapsed after it has been opened.
defaultValue	string | string[]	-	The default value of the item to expand.
disabled	boolean	false	When true, prevents the user from interacting with the accordion.
dir	ltr | rtl	ltr	The reading direction of the accordion.
orientation	vertical | horizontal	vertical	The orientation of the accordion.

Events

Accordion

Event	Payload	Description
update:modelValue	string | string[] | undefined	Event handler called when the value changes.

AccordionItem

Prop	Type	Default	Description
value	string	-	A unique value for the item.
disabled	boolean	false	When true, prevents the user from interacting with the item.

Slots

Accordion

Slot	Description
default	The content of the accordion.

AccordionTrigger

Slot	Description
default	The content of the trigger.

AccordionContent

Slot	Description
default	The content of the accordion item.