Bridge UI

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. Expanded items stay on the same quiet text color; color optionally accents the open trigger.

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 — the layout for Sidebar nav groups), and separated (individual cards with gap). plain skips the expanded color accent, and its panels hide while a collapsed icon rail is active.

Colors

Use the color prop to optionally accent the expanded trigger and indicator. Expanded headers stay on a quiet text color. It has no effect when variant is plain. Available colors: primary, secondary, success, info, warning, error, dark, and black.

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.

Card, List, Sidebar, Tabs

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

Prop Type Default Description
@change (value: AccordionValue) => void — Same payload as model updates.
@update:model-value (value: AccordionValue) => void — Emitted when expansion changes.
v-model / modelValue string | string[] — Expanded value(s).
Prop Type Default Description
defaultValue string | string[] — Initial value when uncontrolled.
onChange (value: AccordionValue) => void — Called when expansion changes.
value string | string[] — Controlled expanded value(s).
Prop Type Default Description
classes AccordionClasses — Classes for root.
color AccordionColor "dark" Optional text accent for the expanded trigger and indicator. Not applied when variant is plain.
customProps AccordionCustomProps — Props forwarded to the root element. Root HTML attributes stay on the component top level.
disabled boolean false Disable all items.
multiple boolean false Allow more than one item expanded at once.
size AccordionSize "md" Density of triggers and panels.
variant AccordionVariant "default" Structural layout: default, outlined, plain, or separated.

AccordionItem

Prop Type Default Description
children panel content — Content shown when expanded.
classes AccordionItemClasses — Classes for root, trigger, title, indicator, panel.
customProps AccordionItemCustomProps — Props forwarded to internal parts.
disabled boolean false Disable this item.
slots { title?, indicator? } — Custom title or expand indicator (React). Vue: #title, #indicator.
title ReactNode / Vue slot content — Trigger label.
value string required Stable id for expanded state.