Menu
Documentation
v4.0.0-beta.4

Accordion

<BaseAccordion /> · A group of togglable entries.

View SourceOpen Issue

vue
<template>
  <BaseAccordion
    :items="accordion"
    type="single"
    collapsible
    rounded="sm"
  />
</template>

<script setup lang="ts">
const accordion = [
  {
    title: 'Accordion Item 1',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    title: 'Accordion Item 2',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    title: 'Accordion Item 3',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
]
</script>

Features

  • Can expand one or multiple items
  • Supports toggle mode
  • Full keyboard navigation
  • Can be controlled or uncontrolled

Anatomy

This component accepts a list of items to render the accordion items. You can also customize the accordion item by using the BaseAccordionItem component.

vue
<template>
  <BaseAccordion>
    <BaseAccordionItem>
      <!-- Item content here -->
    </BaseAccordionItem>
  </BaseAccordion>
</template>

API Reference

This component has props that you can use to modify its behavior.

Accordion

Model Type
model-value
string | string[]

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`

Prop Type
items
default:-
BaseAccordionItemProps[]

The accordion items to display.

variant
default:-
"default"

The variant of the accordion.

action
default:-
"dot" | "chevron" | "plus"

Defines the icon used for accordion item toggle action

collapsible
default:-
boolean

When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect.

disabled
default:-
boolean

When `true`, prevents the user from interacting with the accordion and all its items

dir
default:-
Direction

The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.

orientation
default:-
DataOrientation

The orientation of the accordion.

unmount-on-hide
default:-
boolean

When `true`, the element will be unmounted on closed state.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

type
default:-
SingleOrMultipleType

Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from `modelValue` and `defaultValue`.

default-value
default:-
string | string[]

The default active value of the item(s). Use when you do not need to control the state of the item(s).

Slot Type
#default
any

Accordion Item

Prop Type
value
default:-
string

A string value for the accordion item. All items within an accordion should use a unique value.

title
default:-
string

The title of the accordion item.

content
default:-
string

The content of the accordion item.

variant
default:"default"
"default"

The variant of the accordion.

action
default:"dot"
"dot" | "chevron" | "plus"

Defines the icon used for accordion item toggle action

bindings
default:{}
{ header?: AccordionHeaderProps; content?: AccordionContentProps; trigger?: AccordionTriggerProps; }

Optional bindings to pass to the inner components.

classes
default:{}
{ header?: string | string[]; content?: string | string[]; trigger?: string | string[]; }

Optional classes to pass to the inner components.

disabled
default:-
boolean

Whether or not an accordion item is disabled from user interaction. When `true`, prevents the user from interacting with the item.

unmount-on-hide
default:-
boolean

When `true`, the element will be unmounted on closed state.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Slot Type
#default
any
#title
any
#action
any

Examples

Single

Use the type="single" prop to control wether only one item should be open at a time.

vue
<template>
  <BaseAccordion
    :items="accordion"
    type="single"
  />
</template>

<script setup lang="ts">
const accordion = [
  {
    value: 'item-1',
    title: 'Accordion Item 1',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-2',
    title: 'Accordion Item 2',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-3',
    title: 'Accordion Item 3',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
]
</script>

Single collapsible

Use the type="single" and the collapsible props to be able to close an accordion item when clicking on its trigger.

vue
<template>
  <BaseAccordion
    :items="accordion"
    type="single"
    collapsible
  />
</template>

<script setup lang="ts">
const accordion = [
  {
    value: 'item-1',
    title: 'Accordion Item 1',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-2',
    title: 'Accordion Item 2',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-3',
    title: 'Accordion Item 3',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
]
</script>

Multiple

Use the type="multiple" prop to control wether multiple items can be open at the same time.

vue
<template>
  <BaseAccordion
    :items="accordion"
    type="multiple"
  />
</template>

<script setup lang="ts">
const accordion = [
  {
    value: 'item-1',
    title: 'Accordion Item 1',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-2',
    title: 'Accordion Item 2',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-3',
    title: 'Accordion Item 3',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
]
</script>

Chevron icon

Use the action prop to control the type of the accordion action icon.

vue
<template>
  <BaseAccordion
    :items="accordion"
    type="single"
    collapsible
    rounded="sm"
    action="chevron"
  />
</template>

<script setup lang="ts">
const accordion = [
  {
    value: 'item-1',
    title: 'Accordion Item 1',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-2',
    title: 'Accordion Item 2',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-3',
    title: 'Accordion Item 3',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
]
</script>

Plus icon

Use the action prop to control the type of the accordion action icon.

vue
<template>
  <BaseAccordion
    :items="accordion"
    type="single"
    collapsible
    rounded="sm"
    action="plus"
  />
</template>

<script setup lang="ts">
const accordion = [
  {
    title: 'Accordion Item 1',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    title: 'Accordion Item 2',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    title: 'Accordion Item 3',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
]
</script>

Radius

Use the rounded prop to control the border radius of the accordion.

vue
<template>
  <BaseAccordion
    :items="accordion"
    type="single"
    collapsible
    rounded="lg"
  />
</template>

<script setup lang="ts">
const accordion = [
  {
    value: 'item-1',
    title: 'Accordion Item 1',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-2',
    title: 'Accordion Item 2',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
  {
    value: 'item-3',
    title: 'Accordion Item 3',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve? Duo Reges: constructio interrete.',
  },
]
</script>

Accordion item slot

Use the AccordionItem component in the default slot to render custom accordion items.

vue
<template>
  <BaseAccordion type="single" collapsible>
    <BaseAccordionItem
      value="item-1"
      title="Accordion Item 1"
    >
      <template #title>
        Accordion Item 1
      </template>

      Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipiscing elit.
      Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve?
      Duo Reges: constructio interrete.
    </BaseAccordionItem>
    <BaseAccordionItem
      value="item-2"
      title="Accordion Item 2"
      variant="default"
      action="chevron"
    >
      <template #title>
        Accordion Item 2
      </template>

      Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipiscing elit.
      Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve?
      Duo Reges: constructio interrete.
    </BaseAccordionItem>
    <BaseAccordionItem
      value="item-3"
      title="Accordion Item 3"
      variant="default"
      action="plus"
    >
      <template #title>
        Accordion Item 3
      </template>

      Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipiscing elit.
      Quo tandem modo? Inde igitur, inquit, ordiendum est. Primum quid tu dicis breve?
      Duo Reges: constructio interrete.
    </BaseAccordionItem>
  </BaseAccordion>
</template>

Migrating from v3

Autocomplete