Accordion

Organize related content into independently expandable sections.

Usage

Single

Keep one active value while moving and selecting with keyboard or pointer input.

<!-- Accordion / Single -->
<script setup lang="ts">
import {
  AccordionContent, AccordionHeader, AccordionItem,
  AccordionRoot, AccordionTrigger,
} from '@sectile/vue/accordion'

const items = ['general', 'deployments', 'danger']
</script>

<template>
  <AccordionRoot
    :items="items"
    type="single"
    :collapsible="true"
  >
    <AccordionItem v-for="item in items" :key="item" :value="item">
      <AccordionHeader><AccordionTrigger>{{ item }}</AccordionTrigger></AccordionHeader>
      <AccordionContent>Settings for {{ item }}</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

Multiple

Select several values independently without collapsing the existing selection.

<!-- Accordion / Multiple -->
<script setup lang="ts">
import {
  AccordionContent, AccordionHeader, AccordionItem,
  AccordionRoot, AccordionTrigger,
} from '@sectile/vue/accordion'

const items = ['general', 'deployments', 'danger']
</script>

<template>
  <AccordionRoot
    :items="items"
    type="multiple"
    :collapsible="true"
  >
    <AccordionItem v-for="item in items" :key="item" :value="item">
      <AccordionHeader><AccordionTrigger>{{ item }}</AccordionTrigger></AccordionHeader>
      <AccordionContent>Settings for {{ item }}</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

Required

Require one value to remain selected or one section to remain expanded.

Build targets and release protection. Expanded

<!-- Accordion / Required -->
<script setup lang="ts">
import {
  AccordionContent, AccordionHeader, AccordionItem,
  AccordionRoot, AccordionTrigger,
} from '@sectile/vue/accordion'

const items = ['general', 'deployments', 'danger']
</script>

<template>
  <AccordionRoot
    :items="items"
    type="single"
    default-value="deployments"
  >
    <AccordionItem v-for="item in items" :key="item" :value="item">
      <AccordionHeader><AccordionTrigger>{{ item }}</AccordionTrigger></AccordionHeader>
      <AccordionContent>Settings for {{ item }}</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

<!-- Accordion / Controlled -->
<script setup lang="ts">
import {
  AccordionContent, AccordionHeader, AccordionItem,
  AccordionRoot, AccordionTrigger,
} from '@sectile/vue/accordion'

const items = ['general', 'deployments', 'danger']
</script>

<template>
  <AccordionRoot
    :items="items"
    type="single"
    :collapsible="true"
  >
    <AccordionItem v-for="item in items" :key="item" :value="item">
      <AccordionHeader><AccordionTrigger>{{ item }}</AccordionTrigger></AccordionHeader>
      <AccordionContent>Settings for {{ item }}</AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>

API

Vue package: @sectile/vue/accordion

Components

AccordionRoot
AccordionItem
AccordionHeader
AccordionTrigger
AccordionContent

Props

`AccordionRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
collapsible: TypebooleanDefaulttrue
Whether the final expanded item may be collapsed.
defaultValue: TypeAccordionValueDefaultundefined
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
disabledItems: Typereadonly string[]Default[]
Item values excluded from focus and selection.
items: Typereadonly string[]DefaultRequired
Ordered item values managed by the component.
modelValue: TypeAccordionValueDefaultundefined
Current value when state is controlled by the parent.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
type: TypeAccordionTypeDefault'single'
Selection or behavior mode used by the component.

`AccordionItemProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
value: TypestringDefaultRequired
Current value exposed by this contract.

`AccordionPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`AccordionRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: TypeAccordionValue
Current value exposed by this contract.

`AccordionItemSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
open: Typeboolean
Whether the associated popup or disclosure is open.
value: Typestring
Current value exposed by this contract.

Events

`AccordionRoot`

update:modelValue: PayloadAccordionValue
Emitted when the component requests a new controlled value.

Other types

`AccordionType`

type AccordionType = 'single' | 'multiple'

`AccordionValue`

type AccordionValue = string | readonly string[]

`AccordionValueChangeHandler`

type AccordionValueChangeHandler = (value: AccordionValue) => void

Parts

Shared scope: [data-scope="accordion"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`item`	`[data-part="item"]`	Represents one selectable or actionable item.	—
`header`	`[data-part="header"]`	Provides the semantic heading for an expandable item.	—
`trigger`	`[data-part="trigger"]`	Opens, closes, or activates the associated content.	—
`content`	`[data-part="content"]`	Contains the component content shown for the active state.	—

Keyboard interaction

Key	Behavior
`Enter` / `Space`	Toggle the focused section.
`Arrow Up` / `Arrow Down`	Move focus between section triggers.
`Home` / `End`	Move focus to the first or last section trigger.

Accessibility

Section triggers expose expanded state and control their content regions.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Accordion ​

Usage ​

Single ​

General

Deployments

Danger zone

Multiple ​

General

Deployments

Danger zone

Required ​

General

Deployments

Danger zone

Controlled ​

General

Deployments

Danger zone

API ​

Props ​

AccordionRootProps ​

AccordionItemProps ​

AccordionPartProps ​

Slots ​

AccordionRootSlotProps ​

AccordionItemSlotProps ​

Events ​

AccordionRoot ​

Other types ​

AccordionType ​

AccordionValue ​

AccordionValueChangeHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​

Accordion

Usage

Single

Multiple

Required

Controlled

API

Props

`AccordionRootProps`

`AccordionItemProps`

`AccordionPartProps`

Slots

`AccordionRootSlotProps`

`AccordionItemSlotProps`

Events

`AccordionRoot`

Other types

`AccordionType`

`AccordionValue`

`AccordionValueChangeHandler`

Parts

Keyboard interaction

Accessibility