Accordion · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JAccordion, JAccordionItem } from '@juxtui/ui'

Usage #

<JAccordion v-model="open">
  <JAccordionItem value="shipping" title="Shipping">
    Orders ship within one business day.
  </JAccordionItem>
  <JAccordionItem value="returns" title="Returns">
    Returns are accepted within 30 days of delivery.
  </JAccordionItem>
</JAccordion>

In single mode (the default), opening an item closes any other — set type="multiple" and the model becomes an array to allow several open at once.

Each trigger renders inside a heading element (h3 by default) so the accordion contributes a correct outline — change it with heading-level.

Variants & examples #

Multiple open#

type="multiple", several panels open at once.

Orders ship within one business day.

Returns are accepted within 30 days of delivery.

Every product carries a two-year warranty.

<script setup lang="ts">
const open = ref(['shipping'])
</script>

<template>
  <JAccordion v-model="open" type="multiple" class="w-96">
    <JAccordionItem value="shipping" title="Shipping">
      <p>Orders ship within one business day.</p>
    </JAccordionItem>
    <JAccordionItem value="returns" title="Returns">
      <p>Returns are accepted within 30 days of delivery.</p>
    </JAccordionItem>
    <JAccordionItem value="warranty" title="Warranty">
      <p>Every product carries a two-year warranty.</p>
    </JAccordionItem>
  </JAccordion>
</template>

Disabled item#

Orders ship within one business day.

Returns are accepted within 30 days of delivery.

Every product carries a two-year warranty.

<script setup lang="ts">
const open = ref('shipping')
</script>

<template>
  <JAccordion v-model="open" class="w-96">
    <JAccordionItem value="shipping" title="Shipping">
      <p>Orders ship within one business day.</p>
    </JAccordionItem>
    <JAccordionItem value="returns" title="Returns" disabled>
      <p>Returns are accepted within 30 days of delivery.</p>
    </JAccordionItem>
    <JAccordionItem value="warranty" title="Warranty">
      <p>Every product carries a two-year warranty.</p>
    </JAccordionItem>
  </JAccordion>
</template>

API #

JAccordion

Prop	Type	Default	Description
modelValue	`string \| string[] \| null`	`null`	Bound with `v-model`. A single value in `single` mode, an array in `multiple` mode.
type	`'single' \| 'multiple'`	`'single'`	`single` keeps at most one item open; `multiple` lets any number stay open.
collapsible	`boolean`	`true`	In `single` mode, allow closing the open item so none are open.
headingLevel	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Heading level wrapping each trigger, for a correct document outline.

Events

Event	Payload	Description
update:modelValue	`string \| string[] \| null`	Emitted when an item is opened or closed.

Slots

Slot	Props	Description
default	—	The `JAccordionItem`s.

JAccordionItem

Prop	Type	Default	Description
value	`string`	—	Identifies the item in the accordion’s `v-model`. Required.
title	`string`	—	Trigger label. The `title` slot overrides it.
disabled	`boolean`	`false`	Skipped by keyboard navigation and not selectable.

Slots

Slot	Props	Description
default	—	Panel content.
title	—	Custom trigger content.

Accessibility #

Follows the WAI-ARIA accordion pattern: triggers are native buttons with aria-expanded and aria-controls, arranged for arrow-key navigation.
Each panel is role="region", labelled by its trigger, and marked inert while closed.
Panel height animates through CSS grid rows and is skipped under reduced motion.

Keyboard #

Key	Action
`↓↑`	Move between triggers, wrapping around.
`HomeEnd`	Jump to the first or last trigger.
`Enter`	Toggles the focused item.
`Space`	Toggles the focused item.