Preview

Installation

npx sigma-ui@latest add accordion

Usage

<script setup lang="ts">
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
</script>

<template>
  <Accordion
    type="single"
    collapsible
    default-value="item-1"
  >
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

• Use defaultValue to open an item initially, or v-model to control the open item(s).
• With type="single", one item is open at a time and v-model is a string.
• With type="multiple", several items can be open and v-model is a string[].

Examples

Basic

Displays a single item, collapsed by default, with no defaultValue or v-model.

Multiple

Displays multiple expanded items at once, controlled through v-model.

API Reference

Accordion

Props

Prop	Type	Default
collapsible When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect.	boolean	false
disabled When true, prevents the user from interacting with the accordion and all its items	boolean	false
dir The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.	Direction	"ltr"
orientation The orientation of the accordion.	DataOrientation	"vertical"
unmountOnHide When true, the element will be unmounted on closed state.	boolean	`true`
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
type Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from modelValue and defaultValue.	SingleOrMultipleType	-
modelValue The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with v-model	string | string[]	-
defaultValue The default active value of the item(s). Use when you do not need to control the state of the item(s).	string | string[]	-

Events

Event	Payload
update:modelValue Event handler called when the expanded state of an item changes	[value: string | string[]]

Slots

Slot	Scope
default The content of the component.	-

AccordionContent

Props

Prop	Type	Default
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

AccordionItem

Props

Prop	Type	Default
disabled Whether or not an accordion item is disabled from user interaction. When true, prevents the user from interacting with the item.	boolean	false
valuerequired A string value for the accordion item. All items within an accordion should use a unique value.	string	-
unmountOnHide When true, the element will be unmounted on closed state.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

AccordionTrigger

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The trigger label.	-
icon Replaces the chevron icon that rotates when the item opens.	-

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Key	Description
Space	When focus is on the trigger of a collapsed section, expands the section.
Enter	When focus is on the trigger of a collapsed section, expands the section.
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
ArrowDown	Moves focus to the next trigger.
ArrowUp	Moves focus to the previous trigger.
Home	When focus is on a trigger, moves focus to the first trigger.
End	When focus is on a trigger, moves focus to the last trigger.