Accordion

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

tsx

1
2
3
4
5
6<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Question</AccordionTrigger>
    <AccordionContent>Answer</AccordionContent>
  </AccordionItem>
</Accordion>

Accordion — pile de sections expansibles. type="single" ferme les autres quand tu ouvres une (défaut), type="multiple" laisse plusieurs ouvertes.

Installation

Terminal

$ bext ui add accordion

Usage

tsx

1
2
3
4
5
6
7
8import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@bext-stack/ui/primitives"

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to WAI-ARIA.</AccordionContent>
  </AccordionItem>
</Accordion>

Anatomy

<Accordion type="single" collapsible>
  ├── <AccordionItem value="q1">
  │   ├── <AccordionTrigger>Question 1</AccordionTrigger>
  │   └── <AccordionContent>Réponse 1</AccordionContent>
  └── <AccordionItem value="q2">...</AccordionItem>
</Accordion>

API Reference

Accordion

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	undefined
collapsible	boolean	—	Si single : autorise à refermer l'item ouvert.
defaultValue	string \| string[]	—	undefined

AccordionItem

Prop	Type	Default	Description
value	string	—	undefined
children	ReactNode	—	undefined

AccordionTrigger

Prop	Type	Default	Description
children	ReactNode	—	Chevron intégré, rotate 180° quand ouvert.

AccordionContent

Prop	Type	Default	Description
children	ReactNode	—	undefined

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="accordion"	Accordion root	undefined	undefined
data-state	AccordionItem	"open" \| "closed"	undefined

Keyboard

Key	Action
`Space / Enter`	Ouvrir/fermer le trigger focus.
`Arrow Up / Down`	Naviguer entre triggers.

Accessibility

Chaque trigger est un <button aria-expanded aria-controls>, chaque content porte role="region" aria-labelledby.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// An accordion is a stack of expandable sections. A single `open`
// signal holds the open id; each header toggles it and its panel
// shows via <Show> — only the affected nodes update.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Accordion</h1>
      <p style="color:#64748b;margin-top:0">Vertically stacked sections that expand and collapse (signal-driven).</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// An accordion is a stack of expandable sections. Each header toggles
// its panel open or closed; state lives in a "use client" island.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Accordion</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>Vertically stacked sections that expand and collapse.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

Alert →

On This Page