Accordion

Expandable sections for FAQs, settings groups, and stacked content.

Introduction

Accordion groups related content into expandable sections—FAQs, settings groups, and stacked detail panels. Compose with AccordionItem. By default only one item is open; set multiple to allow several at once.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Accordion } from "@bridge-ui/vue/Components/Accordion";
import { AccordionItem } from "@bridge-ui/vue/Components/AccordionItem";

import { Accordion } from "@bridge-ui/react/Components/Accordion";
import { AccordionItem } from "@bridge-ui/react/Components/AccordionItem";

Basic usage

Control expansion with value / onChange (React) or v-model (Vue). Each AccordionItem needs a stable value and a title for the trigger.

Multiple open

Set multiple so more than one panel can stay expanded. The controlled value becomes an array of item values.

Variants

Set the structural layout with variant: default (flush dividers), outlined (boxed group), plain (quiet spacing, no borders), and separated (individual cards with gap).

Colors

Use the color prop for the expanded trigger and indicator accent. Available colors: primary, secondary, success, info, warning, error, and dark.

Sizes

Control density with size: sm, md (default), or lg.

Disabled item

Pass disabled on an AccordionItem to lock that section, or on Accordion to disable the whole group.

Custom title slot

Override the trigger label with a custom title. In React, use slots.title; in Vue, use the #title slot.

Related components

Card, Tabs, List

Accessibility

Each item uses a button trigger with aria-expanded and aria-controls pointing at a panel with role="region". Collapsed panels use aria-hidden. Arrow keys, Home, and End move focus between enabled triggers.

Anatomy

<div> <!-- Accordion root -->
  <div> <!-- AccordionItem root -->
    <button> <!-- trigger -->
      <span> <!-- title -->
      <!-- indicator (chevron or slots.indicator) -->
    </button>
    <div role="region"> <!-- panel -->
  </div>
</div>

Target parts with classes on Accordion (root) or AccordionItem (root, trigger, title, indicator, panel).

API

Accordion

AccordionItem