Accordion

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

Yes. It adheres to the WAI-ARIA design pattern.

vue

<script setup lang="ts">
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from '@oku-ui/primitives'
import { Icon } from '@iconify/vue'

const accordionItems = [
  {
    value: 'item-1',
    title: 'Is it accessible?',
    content: 'Yes. It adheres to the WAI-ARIA design pattern.',
  },
  {
    value: 'item-2',
    title: 'Is it unstyled?',
    content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.',
  },
  {
    value: 'item-3',
    title: 'Can it be animated?',
    content: 'Yes! You can use the transition prop to configure the animation.',
  },
]
</script>

<template>
  <AccordionRoot
    class="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
    default-value="item-1"
    type="single"
    :collapsible="true"
  >
    <template
      v-for="item in accordionItems"
      :key="item.value"
    >
      <AccordionItem
        class="focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px]"
        :value="item.value"
      >
        <AccordionHeader class="flex">
          <AccordionTrigger class="text-mauve12 shadow-mauve6 hover:bg-mauve2 flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none group">
            <span>{{ item.title }}</span>
            <Icon
              icon="radix-icons:chevron-down"
              class="text-indigo10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
              aria-label="Expand/Collapse"
            />
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent class="text-mauve12 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px]">
          <div class="px-5 py-4">
            {{ item.content }}
          </div>
        </AccordionContent>
      </AccordionItem>
    </template>
  </AccordionRoot>
</template>

Features

Full keyboard navigation.
Supports horizontal/vertical orientation.
Supports Right to Left direction.
Can expand one or multiple items.
Can be controlled or uncontrolled.

Installation

Install the component from your command line.

$ npm add @oku-ui/primitives

Anatomy

Import all parts and piece them together.

vue

<script setup>
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from '@oku-ui/primitives'
</script>

<template>
  <AccordionRoot>
    <AccordionItem>
      <AccordionHeader>
        <AccordionTrigger />
      </AccordionHeader>
      <AccordionContent />
    </AccordionItem>
  </AccordionRoot>
</template>

API Reference

Root

Contains all the parts of an Accordion

Prop	Default	Type
`collapsible`		`boolean`
`defaultValue`		`string \| string[]`
`dir`		`'ltr' \| 'rtl'` The language read direction.
`disabled`		`boolean` Whether or not an accordion is disabled from user interaction.
`orientation`		`'horizontal' \| 'vertical'` The layout in which the Accordion operates.
`type`		`'single' \| 'multiple'`
`value`		`string \| string[]`

Emit	Payload
`update:value`	`[value: string \| string[]]`

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Item

Contains all the parts of a collapsible section.

Prop	Default	Type
`disabled`		`boolean` Whether or not an accordion item is disabled from user interaction.
`value*`		`string` A string value for the accordion item. All items within an accordion should use a unique value.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Wraps an AccordionTrigger. Use the as="template" prop to update it to the appropriate heading level for your page.

Prop	Default	Type
`as`	`'h3'`	`object \| AsTag`

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Trigger

Toggles the collapsed state of its associated item. It should be nested inside of an AccordionHeader.

Prop	Default	Type
`as`	`'button'`	`object \| AsTag`

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Content

Contains the collapsible content for an item.

Prop	Default	Type
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

CSS Variable	Description
`--radix-accordion-content-width`	The width of the content when it opens/closes
`--radix-accordion-content-height`	The height of the content when it opens/closes

Examples

Expanded by default

Use the defaultValue prop to define the open item by default.

vue

<template>
  <AccordionRoot
    type="single"
    default-value="item-2"
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

Allow collapsing all items

Use the collapsible prop to allow all items to close.

vue

<template>
  <AccordionRoot
    type="single"
    collapsible
  >
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

Multiple items open at the same time

Set the type prop to multiple to enable opening multiple items at once.

vue

<template>
  <AccordionRoot type="multiple">
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

Rotated icon when open

You can add extra decorative elements, such as chevrons, and rotate it when the item is open.

vue

// index.vue
<script setup>
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from '@oku-ui/primitives'
import { Icon } from '@iconify/vue'
import './styles.css'
</script>

<template>
  <AccordionRoot type="single">
    <AccordionItem value="item-1">
      <AccordionHeader>
        <AccordionTrigger class="AccordionTrigger">
          <span>Trigger text</span>
          <Icon
            icon="radix-icons:chevron-down"
            class="AccordionChevron"
          />
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>…</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

css

/* styles.css */
.AccordionChevron {
  transition: transform 300ms;
}
.AccordionTrigger[data-state="open"] > .AccordionChevron {
  transform: rotate(180deg);
}

Horizontal orientation

Use the orientation prop to create a horizontal Accordion

vue

<template>
  <AccordionRoot orientation="horizontal">
    <AccordionItem value="item-1">
      …
    </AccordionItem>
    <AccordionItem value="item-2">
      …
    </AccordionItem>
  </AccordionRoot>
</template>

Animating content size

Use the --radix-accordion-content-width and/or --radix-accordion-content-height CSS variables to animate the size of the content when it opens/closes:

vue

// index.vue
<script setup>
import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from '@oku-ui/primitives'
import './styles.css'
</script>

<template>
  <AccordionRoot type="single">
    <AccordionItem value="item-1">
      <AccordionHeader>…</AccordionHeader>
      <AccordionContent class="AccordionContent">
        …
      </AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

css

/* styles.css */
.AccordionContent {
  overflow: hidden;
}
.AccordionContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	When focus is on an `AccordionTrigger` of a collapsed section, expands the section.
`Enter`	When focus is on an `AccordionTrigger` 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 `AccordionTrigger` when `orientation` is `vertical`.
`ArrowUp`	Moves focus to the previous `AccordionTrigger` when `orientation` is `vertical`.
`ArrowRight`	Moves focus to the next `AccordionTrigger` when `orientation` is `horizontal`.
`ArrowLeft`	Moves focus to the previous `AccordionTrigger` when `orientation` is `horizontal`.
`Home`	When focus is on an `AccordionTrigger`, moves focus to the start `AccordionTrigger`.
`End`	When focus is on an `AccordionTrigger`, moves focus to the last `AccordionTrigger`.

Accordion ​

Is it accessible?

Is it unstyled?

Can it be animated?

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Item ​

Header ​

Trigger ​

Content ​

Examples ​

Expanded by default ​

Allow collapsing all items ​

Multiple items open at the same time ​

Rotated icon when open ​

Horizontal orientation ​

Animating content size ​

Accessibility ​

Keyboard Interactions ​